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而不是网络包。

对于你的组件（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 - ＆gt; scripts - ＆gt;“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()]
}

用于组件库的Webpack

1 个答案: