npm包發佈記錄

下雪了，在家閒着，不如寫一個npm 包發佈。簡單的 npm 包的發佈網上有很多教程，我就不記錄了。這裏記錄下，一個複雜的 npm 包發佈，複雜指的構建環境複雜。

整個工程使用 rollup 來構建，其中會引進 babel 來轉譯 ES6，利用 Eslint 來規範代碼的書寫風格，最後代碼的發佈會經過 uglify 壓縮。同時發佈 umd、es 格式的版本以供外部調用。

完整目錄結構如下：

下面是整個過程的記錄

一、初始化工程

yarn init -y

初始化後，修改 package.json 內容，如 name(項目名)，description(項目描述)等信息。

二、安裝 rollup

yarn add [email protected] --dev

三、創建配置文件 rollup.config.js

export default {
  input: 'src/index.js',
  output: {
    file: 'index.common.js',
    format: 'umd',
    name: 'index'
  }
}

四、安裝 babel

yarn add [email protected] @babel/[email protected] @babel/[email protected] --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 [email protected]

七、配置 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 [email protected] [email protected] --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 [email protected] [email protected] --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 [email protected] --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