190502.md

使用 webpack 发布一个 npm 插件

插件要求

1. 支持 typescript
2. 完整的一套构建，开发，测试，打包压缩等步骤

构建插件项目

1. npm init
2. 支持 typescript
3. 在这里我使用了以前的配置

项目文件架构

1. /lib: 插件压缩后的源码
2. /src: 插件开发demo
3. /tests: 插件测试
4. /index.js: 输出插件
5. /readme.md: 插件说明文件 。。。

插件打包

1. 跟我们项目打包不同，所以我专门写了一个打包配置：webpack.dev.config.js
2. 输出配置

// webpack.dev.config
···
output: {
      path: path.resolve(__dirname, "lib"), //将js文件打包到lib的目录
      filename: "[name].min.js",
      library: 'numberWord', // 指定类库名,主要用于直接引用的方式(比如使用script 标签)
      libraryExport: "default", // 对外暴露default属性，就可以直接调用default里的属性
      globalObject: 'this', // 定义全局变量,兼容node和浏览器运行，避免出现"window is not defined"的情况
      libraryTarget: 'umd' // 定义打包方式Universal Module Definition,同时支持在es6模块、CommonJS、AMD和全局变量使用
},
···

3. 自定义指令配置，这样根据自定义打包配置可以只打包我们所需要的源码

// package.json
···
"build": "webpack -p --config webpack.dev.config.js",
···

发布

1. 有了开发完毕且压缩好的插件之后
2. 我们可以在 npm 上进行注册，发布了
3. npm adduser: 按照提示输入已经注册好的 userName password Email
4. npm publish：将代码上传
5. 当你更新插件，在 package.json 的 version 版本号进行改动，小更新就将最后一位加1，在执行 npm publish 就是更新插件了

发布插件配置文件 package.json 简要说明

1. version：版本号，以后每次上传 npm 都需要更改
2. name：插件名字
3. description： 插件描述
4. main：导出插件的出口文件地址，一般为 index.js
5. repository：url 填上你插件 github 的地址

版本号说明

version: 1.2.3；1为主版号，2为次版号，3为修订号

1. 主版号：当你做了不相容的 API 修改，
2. 次版号：当你做了向下相容的功能性新增，
3. 修订号：当你做了向下相容的问题修正。