babel 配置不能在项目中作为 npm 包工作

Question

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

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

在另一个项目中导入这个包时，出现以下错误：

experimental syntax 'jsx' isn't currently enabled

我该如何解决这个问题？

Answer 1

所以，

npm 包需要编译/转译才能用作 npm 包。为什么？因为 jsx 和 Typescript 都需要将构建工具转换为 NodeJS 中的运行nable 代码，并且 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，但其他的，private 和 public 也存在）或者 hot-link 它在本地到另一个 npm 项目：https://docs.npmjs.com/cli/v8/commands/npm-link

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

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

babel 配置不能在项目中作为 npm 包工作

babel config not working in project as npm package

node.js

npm

reactjs