webpack4 进阶篇2——npm插件从开发到发布

本文长期更新，如有错误或补充，欢迎评论区留言
关注一下不迷路 =.=

准备工作

---

1 . 注册账号
注：用户名别填邮箱的前缀

2. 去掉淘宝等镜像（没有跳过）

npm configsetregistry http://registry.npmjs.org

3. 命令行登录账号

npm login

一、初始化项目

---

使用npm init初始化项目，过程各种填值（生成package.json后可再次修改）

• name 插件名，用来install的
• main 指打包后插件入口文件
• repository 指项目源码地址，一般填个git地址

二、项目配置

---

1. babel

webpack.config.js 增加es6转es5

module: {
    rules: [{
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
    }]
}

.babelrc 配置项

{
  "presets": ["@babel/preset-env"]
}

2. 忽略文件

新建.npmignore文件，加入不上传的文件

src/ 
node_modules/
package-lock.json

2. 支持插件多种引入方式

output中增加如下配置

library: 'cacheGet', // 暴露的变量
libraryTarget: 'umd' // 支持的方案，一般填这个就行

3. 处理依赖包

比如你的插件依赖axios，避免将其打包（体积过大）

webpack.config.js 增加如下配置

externals: {
  'axios':'axios'
}

注意：将node_module文件夹放到忽略文件里

4. 增加构建命令

package.json 加个构建命令，方便构建

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
}

之后npm run build打包即可

5. 打包并提交到git

package.json中的main配置项就是打包后的入口文件路径，比如

"main": "dist/bunld.js"

三、发布

---

npm publish ，发布成功可以在官网看的自己发布的包

四、更新

---

1. 修改版本号
2. 发布