共计 4667 个字符，预计需要花费 12 分钟才能阅读完成。
下雪了，在家闲着，不如写一个 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
export default {
input: ‘src/index.js’,
output: {
file: ‘index.common.js’,
format: ‘umd’,
name: ‘index’
}
}
四、安装 babel
yarn add rollup-plugin-babel@4.2.0 @babel/core@7.2.2 @babel/preset-env@7.2.3 –dev
五、配置 babel
1、创建配置文件 .babelrc
{
“presets”: [
[
“@babel/preset-env”,
{
“modules”: false
}
]
]
}
2、与 rollup 集成，在 rollup.config.js 中配置 plugins
import babel from ‘rollup-plugin-babel’
export default {
input: ‘src/index.js’,
output: {
file: ‘index.common.js’,
format: ‘umd’,
name: ‘index’
},
plugins: [
babel({
exclude: ‘node_modules/**’,
runtimeHelpers: true
})
]
}
六、安装 eslint
yarn add eslint@5.11.1
七、配置 eslint
1、生成 eslint 配置
.\node_modules\.bin\eslint –init
2、与 rollup 集成，在 rollup.config.js 中配置 plugins
import babel from ‘rollup-plugin-babel’
import {eslint} from ‘rollup-plugin-eslint’
export default {
input: ‘src/index.js’,
output: {
file: ‘index.common.js’,
format: ‘umd’,
name: ‘index’
},
plugins: [
eslint({
include: [‘src/**’],
exclude: [‘node_modules/**’]
}),
babel({
exclude: ‘node_modules/**’,
runtimeHelpers: true
})
]
}
八、commonjs 兼容
yarn add rollup-plugin-commonjs@9.2.0 rollup-plugin-node-resolve@4.0.0 –dev
九、与 rollup 集成，在 rollup.config.js 中配置 plugins
import babel from ‘rollup-plugin-babel’
import {eslint} from ‘rollup-plugin-eslint’
import resolve from ‘rollup-plugin-node-resolve’
import commonjs from ‘rollup-plugin-commonjs’
export default {
input: ‘src/index.js’,
output: {
file: ‘index.common.js’,
format: ‘umd’,
name: ‘index’
},
plugins: [
resolve({
jsnext: true,
main: true,
browser: true
}),
commonjs(),
eslint({
include: [‘src/**’],
exclude: [‘node_modules/**’]
}),
babel({
exclude: ‘node_modules/**’,
runtimeHelpers: true
})
]
}
十、安装 UglifyJS, 用来压缩代码
yarn add rollup-plugin-uglify@6.0.0 rollup-plugin-uglify-es@0.0.1 –dev
十一、与 rollup 集成，在 rollup.config.js 中配置 plugins
import babel from ‘rollup-plugin-babel’
import {eslint} from ‘rollup-plugin-eslint’
import resolve from ‘rollup-plugin-node-resolve’
import commonjs from ‘rollup-plugin-commonjs’
import {uglify} from ‘rollup-plugin-uglify’
export default {
input: ‘src/index.js’,
output: {
file: ‘index.common.js’,
format: ‘umd’,
name: ‘index’
},
plugins: [
resolve({
jsnext: true,
main: true,
browser: true
}),
commonjs(),
eslint({
include: [‘src/**’],
exclude: [‘node_modules/**’]
}),
babel({
exclude: ‘node_modules/**’,
runtimeHelpers: true
}),
uglify()
]
}
十二、引入环境变量，实践差异化打包
1、安装插件
yarn add rollup-plugin-replace@2.1.0 –dev
2、配置 plugins
import babel from ‘rollup-plugin-babel’
import {eslint} from ‘rollup-plugin-eslint’
import resolve from ‘rollup-plugin-node-resolve’
import commonjs from ‘rollup-plugin-commonjs’
import {uglify} from ‘rollup-plugin-uglify’
import replace from ‘rollup-plugin-replace’
export default {
input: ‘src/index.js’,
output: {
file: ‘index.common.js’,
format: ‘umd’,
name: ‘index’
},
plugins: [
resolve({
jsnext: true,
main: true,
browser: true
}),
commonjs(),
eslint({
include: [‘src/**’],
exclude: [‘node_modules/**’]
}),
babel({
exclude: ‘node_modules/**’,
runtimeHelpers: true
}),
replace({
exclude: ‘node_modules/**’,
ENV: JSON.stringify(process.env.NODE_ENV)
}),
uglify()
]
}
十三、参数化配置，加入版权说明，最终配置如下
import resolve from ‘rollup-plugin-node-resolve’
import commonjs from ‘rollup-plugin-commonjs’
import {eslint} from ‘rollup-plugin-eslint’
import babel from ‘rollup-plugin-babel’
import replace from ‘rollup-plugin-replace’
import {uglify} from ‘rollup-plugin-uglify’
import uglifyEs from ‘rollup-plugin-uglify-es’
const pJson = require(‘./package.json’)
const version = pJson.version
const license = pJson.license
const banner =
‘/*!\n’ +
` * ${pJson.name} v${version}\n` +
` * (c) 2018-${new Date().getFullYear()}\n` +
` * Released under the ${license} License.\n` +
‘ */’
const ENV = process.env.NODE_ENV.trim()
const paths = {
input: {
root: ‘src/index.js’
},
output: {
root: ‘dist/’
}
}
const fileNames = {
development: ‘index.common.js’,
production: ‘index.common.js’,
production6: ‘index.esm.js’
}
const fileName = fileNames[ENV]
export default {
input: `${paths.input.root}`,
output: {
file: `${paths.output.root}${fileName}`,
format: ENV === ‘production6’ ? ‘es’ : ‘umd’,
name: ‘index’,
banner
},
plugins: [
resolve({
jsnext: true,
main: true,
browser: true
}),
commonjs(),
eslint({
include: [‘src/**’],
exclude: [‘node_modules/**’]
}),
babel({
exclude: ‘node_modules/**’,
runtimeHelpers: true
}),
replace({
exclude: ‘node_modules/**’,
ENV: JSON.stringify(process.env.NODE_ENV)
}),
(ENV === ‘production’) && uglify({output: { comments: /^!/} }),
(ENV === ‘production6’) && uglifyEs({output: { comments: /^!/} })
]
}
三、业务代码编写
在 src/index.js 中编写具体业务代码
四、打包
在 package.json 中添加
“scripts”: {
“dev”: “set NODE_ENV=development && rollup -c”,
“build”: “yarn run buildcjs && yarn run buildesm”,
“buildcjs”: “set NODE_ENV=production && rollup -c”,
“buildesm”: “set NODE_ENV=production6 && rollup -c”
}
运行命令
yarn run build
五、发布
npm publish
发布前记得记得 注册 帐号，记得修改 package.json 中 private 字段为 false
“private”: false
