使用 rollup 打包可按需加載的 NPM 包

安裝 rollup

npm install rollup --save-dev

配置文件 rollup.config.js

export default {
  input: 'src/index.js',
  output: {
    file: 'lib/bundle.js',
    format: 'cjs'
  }
};

此時可以使用 npx rollup -c 來創建 bundle 了。

配置插件

安裝插件 Babel

npm install @babel/core @babel/preset-env rollup-plugin-babel --save-dev

配置 .babelrc：

{
  "presets": [
      "@babel/env"
  ]
}

添加到 rollup 配置文件 rollup.config.js：

import babel from 'rollup-plugin-babel';

export default {
  input: 'src/index.js',
  output: [{
    file: 'lib/index.cjs.js',
    format: 'cjs'
  }, {
    file: 'lib/index.ems.js',
    format: 'ems'
  }],
  plugins: [
    babel()
  ]
};

配置 package.json 入口文件

"main": "lib/index.cjs.js",
"module": "lib/index.esm.js",

一鍵發佈

"release": "npx rollup -c && npm publish"

附錄

案例：https://github.com/mazeyqian/mazey

閱讀原文：https://blog.mazey.net/1526.html