javascript - 打包一个 npm 模块，以便它可以在前端工作(例如，使用 create-react-app) `You may need an appropriate loader to handle this file type`

Question

我已经编写了一个 Node 模块并将其作为 Node 包发布。当我在后端应用程序(纯 nodejs，没有 babel 或 transpile)中使用它时，它起作用了。

但是，当我在前端(在我的例子中是“create-react-app”)应用程序中使用相同的 npm 模块时，它会中断。波纹管是确切的错误:

Module parse failed: Unexpected token (14:2)
You may need an appropriate loader to handle this file type.

错误是指我使用扩展运算符 (...)。我宁愿不必重写库，而宁愿添加某种转译器来打包我的库。我还没有找到明确的解决方案，它们都很复杂。

我试过使用 rollupjs , 和 https://github.com/insin/nwb .可悲的是，这似乎不是我所追求的。

运行我的代码:

您可以使用 npm i cbs-proxy-client@0.0.3 将库安装到您创建的 React 应用程序中。然后将行 const cbsProxyClient = require('cbs-proxy-client') 或 import cbsProxyClient from 'cbs-proxy-client' 添加到您的任何脚本中。

建议将不胜感激:)

Answer 1

用于前端的库应该打包源 javascript 的已转译版本。为此，您可能希望在库中使用 rollup 作为构建过程来创建捆绑文件。您可以使用 babel 来转换您的代码以获得所需的浏览器支持。假设捆绑文件保存在 dist/bundle.js 中。现在您将修改 package.json 以使用 main parameter in package.json 加载此捆绑文件作为 entry 文件。

如果您使用 rollup 或 webpack 进行构建，很容易忽略应该将捆绑文件准备为库。这意味着使用 commonjs 导入文件应该能够 export 正确的变量。典型的 webpack 构建会删除此类导出，因为它应该直接在浏览器上工作。 This blog is in my bookmarks titled "js library steps"因为我正在创建我的第一个 js 库。

请注意，您无需将生成的文件置于版本控制中。您可以使用 npm files property在 package.json 中打包你的捆绑文件，同时在 git 中忽略它们。