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 ];

如何创建可以在需要时导入单个组件的库

1 个答案: