babel config 在项目中不能作为 npm 包工作答案

【问题标题】：babel config not working in project as npm packagebabel config 在项目中不能作为 npm 包工作
【发布时间】：2022-01-15 19:27:32
【问题描述】：

使用以下 babel.config.json 文件创建了一个 npm 包：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-syntax-jsx"
  ]
}

在另一个项目中导入这个包时，我收到以下错误：

experimental syntax 'jsx' isn't currently enabled

我该如何解决这个问题？

【问题讨论】：

您是否编译了包并正在导入编译过程的输出，或者您正在导入源代码？看起来像后者。
我不这么认为。我该怎么做？我认为通过配置 babel 它会在 webpack 或其他项目中自动发生？ @快速反射
你使用的是 Webpack 还是 Babel？好像您正在使用 Babel，然后您必须运行 babel 命令，然后将 package.json 添加到输出文件夹（如果需要，使用包指令）然后您可以将其作为包导入。
是在项目的根目录中，但不在输出文件夹的根目录中。只有输出文件夹是您导入的包，您不导入源，只有编译后的输出。输出中的 package.json 可能表明它是什么类型的包、它的入口点等等：docs.npmjs.com/cli/v8/configuring-npm/package-json
输出文件夹是您的编译输出所在的文件夹。您可以发布到 npm 或 jfrog 或其他一些 npm 注册表，或者如果您只想自己使用该项目，则只需在本地链接它

标签： node.js reactjs npm

【解决方案1】：

所以，

一个 npm 包需要经过编译/转译才能用作 npm 包。为什么？因为 jsx 和 Typescript 都需要将构建工具转换为 NodeJS 中的可运行代码，并且 npm 包不应该对此类工具进行假设。使用 Babel 或 tsc 将源文件转译到项目中的输出文件夹 out。您也可以使用 Webpack 转译和捆绑您的包，即使通常源不捆绑在一个包中，因为它妨碍了 tree-shake 的可能性。

注意是否希望 npm 包提供 esm (ES, es6) 或 cjs (CommonJS) 模块，以及是否要包含类型。 cjs 是更传统的方法，而 esm 是较新的方法。如果您到目前为止不知道自己在做什么，请使用 cjs 开始，因为 esm 可能更难以使用。您也可以在您的包中同时提供这两种变体。

在 Babel、tsc 和 Webpack 的文档中了解此过程，但您必须运行 babel、tsc 或 webpack 命令来获取转译文件。

编辑：也许可以将 jsx 和 Typescript 保存在一个 npm 包中，但这绝对不是通常的做法。例如，ts-loader（通常用于处理 Webpack 中的 Typescript 文件）有设置 allowTsInNodeModules。然而，它似乎需要更多的配置，而且目前还不清楚这种策略有什么优势。
将package.json 添加到out 文件夹。通常我们在项目中使用package.json 来确定要为我们的项目下载什么等等，但在npm 包的根目录中也应该有一个package.json。这个文件决定了你的包有什么依赖关系，还有它是什么类型的包，它的入口点，它是否有类型等等：https://docs.npmjs.com/cli/v8/configuring-npm/package-json
您现在在 out 文件夹中有一个 npm 包。要么将其发布到 npm 注册表（最常见且默认为 npmjs.org，但也存在其他私有和公共）或使用 npm 将其本地热链接到另一个项目：https://docs.npmjs.com/cli/v8/commands/npm-link

您现在已经迈出了构建软件包的第一步。一旦你进入不同类型的模块、tree-shaking 和 npm 内部工作，这是一个很大且相当复杂的主题，所以要有耐心，一次只做一件事。

PS！ out 文件夹也可以命名为其他名称；) DS

【讨论】：