如何发布npm包

2020-06-16 约 941 字预计阅读 2 分钟

参考资料：

nodejs打包js模块并发布到npm使用或者直接打包到本地使用

整体打包vue组件并发布到npm

使用TypeScript开发项目打包发布到npm

源码文件：TS.zip

JS模块发布为npm包

需求：想要在代码中引入自己写的依赖包，并直接使用：

import { GuideMiniProgram } from 'codingbylch-demo';
GuideMiniProgram();

实现步骤：

下载node和vscode（环境等安装忽略）
初始化package.json，终端输入：npm init -y

{
  "name": "node-pub-test", // 修改需要发布到npm上的名称
  "version": "0.1.0", // 版本号，每发布一次都需要更改版本号，从0.1.0开始比较不错
  "description": "", // 对项目的描述
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "", // 作者名
  "license": "ISC"
}

若有依赖其它包，npm进行安装并正常在需要使用的地方引入即可
新建一个文件夹demo，创建JS代码文件index.js：

import axios from 'axios'
export function sum(a,b){
  axios.get('xxx');
	return a + b;
}

添加文件.npmignore，类似.gitignore，对不想上传至npm的文件/文件夹进行忽略
打开npm官网，注册npm账号，编写好代码以后，在终端中输入：npm login，输入用户名、密码、邮箱。输入npm who am i 若显示用户名，表示已经登录成功
发布到npm：在终端中输入npm publish，即可发布到npm
别人如何引入：npm install xxxxx，你的npm包就会存在于别人的node_modules中

命令扩展

撤销已经发布的包

不想在npm包让别人再下载你开发的依赖包时，但尽量避免这种情况，在终端输入此命令： npm unpublish XXXXXX

打包后的文件如何配置

源代码可能包含ES6/ES7等语法，考虑兼容性，会利用webpack/babel进行打包编译，生成打包后的文件（如bundle.js）。打包后的文件被引入时可能提示导出的是空对象，针对此情况webpack需要做如下配置：

// webpack.config.js
const path = require("path");
module.exports = {
  entry: "./src/index.ts",
  mode: "production",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "gotoWxMini.js", // 打包后生成的文件名称
    libraryTarget: "umd", // 打包后文件的导出形式
    libraryExport: "default", // 对外暴露default属性，就可以直接调用default里的属性
    library: "GOTOWX", // 类库名，主要用于直接引用的方式(比如使用script 标签)
    globalObject: "this", // 定义全局变量, 兼容node和浏览器运行, 避免出现"window is not defined"的情况
    environment: {
      arrowFunction: false,
      const: false,
    },
  }
  //......
}

根据以上配置，然后运行npm run build，打包后的文件可被如此使用：

// 法1
import gotoWx from 'gotoWxMini.js'
gotoWx()
// 法2
<script src="./gotoWxMini.js" />
GOTOWX()

目录

如何发布npm包

JS模块发布为npm包

命令扩展

打包后的文件如何配置