下雪了,在家闲着,不如写一个npm 包发布。简单的 npm 包的发布网上有很多教程,我就不记录了。这里记录下,一个复杂的 npm 包发布,复杂指的构建环境复杂。整个工程使用 rollup 来构建,其中会引进 babel 来转译 ES6,利用 Eslint 来规范代码的书写风格,最后代码的发布会经过 uglify 压缩。同时发布 umd、es 格式的版本以供外部调用。完整目录结构如下:下面是整个过程的记录一、初始化工程yarn init -y初始化后,修改 package.json 内容,如 name(项目名),description(项目描述)等信息。二、安装 rollupyarn add rollup@1.0.0 –dev三、创建配置文件 rollup.config.jsexport default { input: ‘src/index.js’, output: { file: ‘index.common.js’, format: ‘umd’, name: ‘index’ }}四、安装 babelyarn add rollup-plugin-babel@4.2.0 @babel/core@7.2.2 @babel/preset-env@7.2.3 –dev五、配置 babel1、创建配置文件 .babelrc{ “presets”: [ [ “@babel/preset-env”, { “modules”: false } ] ]}2、与 rollup 集成,在 rollup.config.js 中配置 pluginsimport 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 }) ]}六、安装 eslintyarn add eslint@5.11.1七、配置 eslint1、生成 eslint 配置.\node_modules.bin\eslint –init2、与 rollup 集成,在 rollup.config.js 中配置 pluginsimport 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 中配置 pluginsimport 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 中配置 pluginsimport 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 –dev2、配置 pluginsimport 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.versionconst license = pJson.licenseconst 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
...