javascript - 如果需要，如何创建一个可以导入单个组件的库 à la lodash

Question

我使用导入/导出在 es6 中编写了一个库。我可以使用 Rollup 将这个库捆绑到一个可以在浏览器中使用的 IIFE 中。

我也希望能够在其他项目中使用这个库。但是，我通常不想包含整个库，只包含其中的一部分。

因为库是使用 es6 import/export 编写的，所以我可以将未捆绑的 index.js 文件作为依赖项包含在另一个项目中，然后 import { myFunc } from 'my-lib' 就可以了太棒了 - 只有在我的项目被捆绑时我才会得到 myFunc。

但是，我遇到了一个问题，因为这些文件没有经过 babel 处理，因此包含 es6 代码，例如箭头函数。我读过，如果您要发布一个库，则它不需要由最终用户进行转译。

我如何获取我的 es6 库并将其打包成既能被转译又能导入其各个组件的方式？我想要与 lodash 的组织方式类似的情况。

这不是最容易表达的东西，所以如果有任何不清楚的地方，请发表评论，我会编辑我的问题以尝试澄清。

Answer 1

我发现最好使用 webpack 创建 2 个模块。一种用于网络，一种用于节点。

在您的节点构建中，您可以选择转译，或者只是将代码保留在 ES6 中，让库客户端决定。

您的 Web 构建可以摇树并删除未使用的代码。

您的 webpack 将导出一个数组而不是一个对象。

这是官方的 webpack 片段 ( https://webpack.js.org/concepts/targets/ )

const path = require('path');
const serverConfig = {
  target: 'node',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.node.js'
  }
  //…
};

const clientConfig = {
  target: 'web', // <=== can be omitted as default is 'web'
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.js'
  }
  //…
};

module.exports = [ serverConfig, clientConfig ];