npm包发布记录

2019-01-01 23:17:35来源：博客园阅读 ()

下雪了，在家闲着，不如写一个npm 包发布。简单的 npm 包的发布网上有很多教程，我就不记录了。这里记录下，一个复杂的 npm 包发布，复杂指的构建环境复杂。

整个工程使用 rollup 来构建，其中会引进 babel 来转译 ES6，利用 Eslint 来规范代码的书写风格，最后代码的发布会经过 uglify 压缩。同时发布 umd、es 格式的版本以供外部调用。

完整目录结构如下：

下面是整个过程的记录

一、初始化工程

yarn init -y

初始化后，修改 package.json 内容，如 name(项目名)，description(项目描述)等信息。

二、安装 rollup

yarn add rollup@1.0.0 --dev

三、创建配置文件 rollup.config.js

1 export default {
2     input: 'src/index.js',
3     output: {
4         file: 'index.common.js',
5         format: 'umd',
6         name: 'index'
7     }
8 }

四、安装 babel

yarn add rollup-plugin-babel@4.2.0 @babel/core@7.2.2 @babel/preset-env@7.2.3 --dev

五、配置 babel

1、创建配置文件 .babelrc

 1 {
 2   "presets": [
 3    [
 4     "@babel/preset-env",
 5     {
 6      "modules": false
 7     }
 8    ]
 9   ]
10 }

2、与 rollup 集成，在 rollup.config.js 中配置 plugins

 1 import babel from 'rollup-plugin-babel'
 2 
 3 export default {
 4   input: 'src/index.js',
 5   output: {
 6     file: 'index.common.js',
 7     format: 'umd',
 8     name: 'index'
 9   },
10   plugins: [
11     babel({
12       exclude: 'node_modules/**',
13       runtimeHelpers: true
14     })
15   ]
16 }

六、安装 eslint

yarn add eslint@5.11.1

七、配置 eslint

1、生成 eslint 配置

.\node_modules\.bin\eslint --init

2、与 rollup 集成，在 rollup.config.js 中配置 plugins

 1 import babel from 'rollup-plugin-babel'
 2 import { eslint } from 'rollup-plugin-eslint'
 3 
 4 export default {
 5   input: 'src/index.js',
 6   output: {
 7     file: 'index.common.js',
 8     format: 'umd',
 9     name: 'index'
10   },
11   plugins: [
12     eslint({
13       include: ['src/**'],
14       exclude: ['node_modules/**']
15     }),
16     babel({
17       exclude: 'node_modules/**',
18       runtimeHelpers: true
19     })
20   ]
21 }

八、commonjs 兼容

yarn add rollup-plugin-commonjs@9.2.0 rollup-plugin-node-resolve@4.0.0 --dev

九、与 rollup 集成，在 rollup.config.js 中配置 plugins

 1 import babel from 'rollup-plugin-babel'
 2 import { eslint } from 'rollup-plugin-eslint'
 3 import resolve from 'rollup-plugin-node-resolve'
 4 import commonjs from 'rollup-plugin-commonjs'
 5 
 6 export default {
 7   input: 'src/index.js',
 8   output: {
 9     file: 'index.common.js',
10     format: 'umd',
11     name: 'index'
12   },
13   plugins: [
14     resolve({
15       jsnext: true,
16       main: true,
17       browser: true
18     }),
19     commonjs(),
20     eslint({
21       include: ['src/**'],
22       exclude: ['node_modules/**']
23     }),
24     babel({
25       exclude: 'node_modules/**',
26       runtimeHelpers: true
27     })
28   ]
29 }

十、安装 UglifyJS, 用来压缩代码

yarn add rollup-plugin-uglify@6.0.0 rollup-plugin-uglify-es@0.0.1 --dev

十一、与 rollup 集成，在 rollup.config.js 中配置 plugins

 1 import babel from 'rollup-plugin-babel'
 2 import { eslint } from 'rollup-plugin-eslint'
 3 import resolve from 'rollup-plugin-node-resolve'
 4 import commonjs from 'rollup-plugin-commonjs'
 5 import { uglify } from 'rollup-plugin-uglify'
 6 
 7 export default {
 8   input: 'src/index.js',
 9   output: {
10     file: 'index.common.js',
11     format: 'umd',
12     name: 'index'
13   },
14   plugins: [
15     resolve({
16       jsnext: true,
17       main: true,
18       browser: true
19     }),
20     commonjs(),
21     eslint({
22       include: ['src/**'],
23       exclude: ['node_modules/**']
24     }),
25     babel({
26       exclude: 'node_modules/**',
27       runtimeHelpers: true
28     }),
29     uglify()
30   ]
31 }

十二、引入环境变量，实践差异化打包

1、安装插件

yarn add rollup-plugin-replace@2.1.0 --dev

2、配置 plugins

 1 import babel from 'rollup-plugin-babel'
 2 import { eslint } from 'rollup-plugin-eslint'
 3 import resolve from 'rollup-plugin-node-resolve'
 4 import commonjs from 'rollup-plugin-commonjs'
 5 import { uglify } from 'rollup-plugin-uglify'
 6 import replace from 'rollup-plugin-replace'
 7 
 8 export default {
 9   input: 'src/index.js',
10   output: {
11     file: 'index.common.js',
12     format: 'umd',
13     name: 'index'
14   },
15   plugins: [
16     resolve({
17       jsnext: true,
18       main: true,
19       browser: true
20     }),
21     commonjs(),
22     eslint({
23       include: ['src/**'],
24       exclude: ['node_modules/**']
25     }),
26     babel({
27       exclude: 'node_modules/**',
28       runtimeHelpers: true
29     }),    
30     replace({
31       exclude: 'node_modules/**',
32       ENVIRONMENT: JSON.stringify(process.env.NODE_ENV)
33     }),
34     uglify()
35   ]
36 }

十三、参数化配置，加入版权说明，最终配置如下

 1 import resolve from 'rollup-plugin-node-resolve'
 2 import commonjs from 'rollup-plugin-commonjs'
 3 import { eslint } from 'rollup-plugin-eslint'
 4 import babel from 'rollup-plugin-babel'
 5 import replace from 'rollup-plugin-replace'
 6 import { uglify } from 'rollup-plugin-uglify'
 7 import uglifyEs from 'rollup-plugin-uglify-es'
 8 
 9 const pJson = require('./package.json')
10 
11 const version = pJson.version
12 const license = pJson.license
13 
14 const banner =
15   '/*!\n' +
16   ` * ${pJson.name} v${version}\n` +
17   ` * (c) 2018-${new Date().getFullYear()}\n` +
18   ` * Released under the ${license} License.\n` +
19   ' */'
20 
21 const ENV = process.env.NODE_ENV.trim()
22 
23 const paths = {
24   input: {
25     root: 'src/index.js'
26   },
27   output: {
28     root: 'dist/'
29   }
30 }
31 
32 const fileNames = {
33   development: 'index.common.js',
34   production: 'index.common.js',
35   production6: 'index.esm.js'
36 }
37 const fileName = fileNames[ENV]
38 
39 export default {
40   input: `${paths.input.root}`,
41   output: {
42     file: `${paths.output.root}${fileName}`,
43     format: ENV === 'production6' ? 'es' : 'umd',
44     name: 'index',
45     banner
46   },
47   plugins: [
48     resolve({
49       jsnext: true,
50       main: true,
51       browser: true
52     }),
53     commonjs(),
54     eslint({
55       include: ['src/**'],
56       exclude: ['node_modules/**']
57     }),
58     babel({
59       exclude: 'node_modules/**',
60       runtimeHelpers: true
61     }),
62     replace({
63       exclude: 'node_modules/**',
64       ENVIRONMENT: JSON.stringify(process.env.NODE_ENV)
65     }),
66     (ENV === 'production') && uglify({ output: { comments: /^!/ } }),
67     (ENV === 'production6') && uglifyEs({ output: { comments: /^!/ } })
68   ]
69 }

三、业务代码编写

在 src/index.js 中编写具体业务代码

四、打包

在 package.json 中添加

1 "scripts": {
2     "dev": "set NODE_ENV=development && rollup -c",
3     "build": "yarn run buildcjs && yarn run buildesm",
4     "buildcjs": "set NODE_ENV=production && rollup -c",
5     "buildesm": "set NODE_ENV=production6 && rollup -c"
6 }

运行命令