摘要：下雪了，在家閑著，不如寫一個(gè)包發(fā)布。簡單的包的發(fā)布網(wǎng)上有很多教程，我就不記錄了。這里記錄下，一個(gè)復(fù)雜的包發(fā)布，復(fù)雜指的構(gòu)建環(huán)境復(fù)雜。同時(shí)發(fā)布格式的版本以供外部調(diào)用。

下雪了，在家閑著，不如寫一個(gè)npm 包發(fā)布。簡單的 npm 包的發(fā)布網(wǎng)上有很多教程，我就不記錄了。這里記錄下，一個(gè)復(fù)雜的 npm 包發(fā)布，復(fù)雜指的構(gòu)建環(huán)境復(fù)雜。

整個(gè)工程使用 rollup 來構(gòu)建，其中會(huì)引進(jìn) babel 來轉(zhuǎn)譯 ES6，利用 Eslint 來規(guī)范代碼的書寫風(fēng)格，最后代碼的發(fā)布會(huì)經(jīng)過 terser 壓縮。同時(shí)發(fā)布 umd、es 格式的版本以供外部調(diào)用。

完整目錄結(jié)構(gòu)如下：

下面是整個(gè)過程的記錄

一、初始化工程

yarn init -y

初始化后，修改 package.json 內(nèi)容，如 name(項(xiàng)目名)，description(項(xiàng)目描述)等信息。

二、安裝 rollup

yarn add [email protected] --dev

三、創(chuàng)建配置文件 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、創(chuàng)建配置文件 .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 配置

.
ode_modules.bineslint --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
    })
  ]
}

十、安裝 terser, 用來壓縮代碼

yarn add [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 { terser } from "rollup-plugin-terser"

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
    }),
    terser()
  ]
}

十二、引入環(huán)境變量，實(shí)踐差異化打包

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 { terser } from "rollup-plugin-terser"
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)
    }),
    terser()
  ]
}

十三、參數(shù)化配置，加入版權(quán)說明，最終配置如下

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 { terser } from "rollup-plugin-terser"

const pJson = require("./package.json")

const version = pJson.version
const license = pJson.license

const banner =
  "/*!
" +
  ` * ${pJson.name} v${version}
` +
  ` * (c) 2018-${new Date().getFullYear()}
` +
  ` * Released under the ${license} License.
` +
  " */"

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 && ENV.includes("production") && terser({ output: { comments: /^!/ } })
  ]
}

三、業(yè)務(wù)代碼編寫

在 src/index.js 中編寫具體業(yè)務(wù)代碼

四、打包

在 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"
}

運(yùn)行命令

yarn run build

五、發(fā)布

npm publish

發(fā)布前記得記得 注冊(cè) 帳號(hào)，記得修改 package.json 中 private 字段為 false

"private": false

后記：[email protected] 在 [email protected] 時(shí)有警告，文章中原 rollup-plugin-uglify 被替換成 rollup-plugin-terser