npm包发布记录

下雪了，在家闲着，不如写一个npm 包发布。简单的 npm 包的发布网上有很多教程，我就不记录了。这里记录下，一个复杂的 npm 包发布，复杂指的构建环境复杂。

整个工程使用 rollup 来构建，其中会引进 babel 来转译 ES6，利用 Eslint 来规范代码的书写风格，最后代码的发布会经过 uglify 压缩。同时发布 umd、es 格式的版本以供外部调用。

完整目录结构如下：

下面是整个过程的记录

一、初始化工程

yarn init -y

初始化后，修改 package.json 内容，如 name(项目名)，description(项目描述)等信息。

二、安装 rollup

yarn add rollup@1.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. @babel/core@7.2. @babel/preset-env@7.2. --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.

七、配置 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. rollup-plugin-node-resolve@4.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. rollup-plugin-uglify-es@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'
 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. --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/**',
       ENVIRONMENT: 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/**',
       ENVIRONMENT: 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