组件库的 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 提供两个不同的目标（节点和浏览器）。我想我知道如何准备我的条目以单独输出所有组件，但是如何在 single 运行中提供缩小版本？

你知道这样的 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 -> 脚本 -> “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()]
}