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

Question

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

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

因为库是使用es6导入/导出编写的,所以我可以将非捆绑的index.js文件作为依赖项包含在另一个项目中然后import { myFunc } from 'my-lib'这很好用 - 我的项目捆绑时只能得到myFunc.

但是我遇到了一个问题,因为这些文件还没有被babel处理,因此包含es6代码,例如箭头函数.我已经读过,如果你要发布一个库,它不应该被最终用户转换.

我如何获取我的es6库并以这样的方式将其捆绑以便进行转换,还能够导入其各个组件？我想要一个类似lodash如何组织的情况.

这不是最容易表达的事情,所以如果有什么不清楚,请发表评论,我会编辑我的问题,试着澄清.

Answer 1

我发现最好使用 webpack 创建 2 个模块。一种用于 Web，一种用于 Node。

\n\n

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

\n\n

您的 Web 构建可以进行 tree-shake 并删除未使用的代码。

\n\n

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

\n\n

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

\n\n

const path = require(\'path\');\nconst serverConfig = {\n  target: \'node\',\n  output: {\n    path: path.resolve(__dirname, \'dist\'),\n    filename: \'lib.node.js\'\n  }\n  //\xe2\x80\xa6\n};\n\nconst clientConfig = {\n  target: \'web\', // <=== can be omitted as default is \'web\'\n  output: {\n    path: path.resolve(__dirname, \'dist\'),\n    filename: \'lib.js\'\n  }\n  //\xe2\x80\xa6\n};\n\nmodule.exports = [ serverConfig, clientConfig ];\n

\n