npm包发布记录
程序员文章站
2022-06-21 22:01:10
下雪了，在家闲着，不如写一个npm 包发布。简单的 npm 包的发布网上有很多教程，我就不记录了。这里记录下，一个复杂的 npm 包发布，复杂指的构建环境复杂。 整个工程使用 rollup 来构建，其中会引进 babel 来转译 ES6，利用 Eslint 来规范代码的书写风格，最后代码的发布会经过 ......
下雪了，在家闲着，不如写一个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
下一篇： 五大浏览器内核介绍