npm包發佈記錄

下雪了，在家閑著，不如寫一個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 }

運行命令

yarn run build

五、發佈

npm publish

發佈前記得記得 註冊  帳號，記得修改 package.json 中 private 欄位為 false

"private": false