npm包釋出記錄

lifefriend_007發表於2018-12-30
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 配置

.
ode_modules.bineslint --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   `/*!
` +
16   ` * ${pJson.name} v${version}
` +
17   ` * (c) 2018-${new Date().getFullYear()}
` +
18   ` * Released under the ${license} License.
` +
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

 

相關文章