组件库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)

目前，我通过两项任务实现了这一点：

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

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

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

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

有什么想法吗，webpack的这种配置应该是什么样子？

Answer 1

你需要的是rollup.js而不是webpack。

对于组件(Button.js、Anchor.js)，请使用汇总-插件-多项

示例(没有多个条目)。请从下面的链接中按文档来完成)

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