javascript - 组件库的 webpack

Question

让我们想象一下组件库的以下结构:

/my-library
  - /src
    - /components
      - Button.js (ES6 + React)
      - Anchor.js (ES6 + React)
    - index.js (ES6)

现在我想为生产准备这个库，这就是我的分发文件夹的样子

/my-library
  - /dist
    - /components
      - Button.js (Target: Node, Compiled to ES5 using babel)
      - Anchor.js (Target: Node, Compiled to ES5 using babel)
    - index.js (Target: browser, compiled and minified with webpack)

目前我通过两项任务实现了这一目标:

1 - 从 src/components “复制”内容并使用 babel 编译的任务。

2 - 在 src/index.js 上运行 webpack 的另一个任务。

我想简化这个过程，有人告诉我可以使用 webpack 作为这个过程的唯一工具。这是有道理的，因为 src/index.js 无论如何都会遍历所有组件，为什么要这样做两次？

我面临的问题是如何为 Webpack(节点和浏览器)提供两个不同的目标。我想我知道如何准备我的条目以单独输出所有组件，但如何在单次运行中提供缩小版本？

知道这样的 webpack 配置应该是什么样子吗？

Answer 1

你需要rollup.js而不是 webpack。

对于您的组件(Button.js、Anchor.js)，请使用 rollup-plugin-multi-entry

示例(没有多个条目。通过下面链接中的文档执行)

rollup -c build/rollup.config.js && uglifyjs dist/index.js -cm --comments -o dist/index.min.js

(它的命令需要添加到 package.json -> scripts -> "build")

示例 rollup.config.js

const buble = require('rollup-plugin-buble')
const flow = require('rollup-plugin-flow-no-whitespace')
const cjs = require('rollup-plugin-commonjs')
const node = require('rollup-plugin-node-resolve')
const replace = require('rollup-plugin-replace')

module.exports = {
  entry: 'src/index.js',
  dest: 'dist/vue-router.js',
  format: 'umd',
  moduleName: 'VueRouter',
  plugins: [replace({
    'process.env.NODE_ENV': '"development"'
  }), flow(), node(), cjs(), buble()]
}