reactjs - 模块解析失败？我需要帮助设置 Babel

Question

我正在编写我的第一个 JavaScript 库，并在本地使用 React 项目对其进行测试。我在编写代码时没有看到任何 Typescript 错误，但是当我为它链接到的 React 项目运行 yarn start 时，我收到以下错误:

ERROR in ../test-lib/src/add.ts 3:29

Module parse failed: Unexpected token (3:29)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| __webpack_require__.$Refresh$.runtime = require('/home/aaron/projects/react-projects/test-app/node_modules/react-refresh/runtime.js');
| 
> export default function add(a: number, b: number) {
|   return a + b
| }

我在做了一些研究后编辑了这个问题以简化问题 - 看起来我需要在我的库中编译 typescript 代码并将其导出到 dist 文件夹？然后依赖它的 React 应用程序可以使用它。

我看到了关于 Babel 和关于 Rollup 的文章，我很困惑我需要哪些(或两者？)以及为什么。许多过时和不完整/懒惰的教程文章似乎没有帮助。

你能帮我设置一下我需要的东西吗？这是我的测试库 test-lib 的当前文件结构:

node_modules/
src/
  add.ts
  index.js
package.json
tsconfig.ts
yarn.lock

以下是相关文件的内容:

src/add.ts:

export default function add(a: number, b: number) {
  return a + b
}

src/index.js:

import add from './add'
export default add

package.json:

{
  "name": "test-lib",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

tsconfig.json:

{
  "include": ["src/**/*"],
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

我知道我必须安装 @babel/... 包和 @babel/preset-typescript 的插件，但我已经离开了这个out 在示例中，因为为了简单起见，我想要一个全新的未触及的 typescript 库。帮我从头开始。

我还有其他问题:

• 我的所有文件都可以是 *.ts 格式吗？入口点是否必须是 javascript 文件？ (我假设任何 *.config.* 文件可能需要是 *.js 因为你需要先从 javascript 开始，这样你就可以为其余的设置 typescript对吧？

• 我听说我应该为 commonjs 和 esnext 编译我的代码。我的选择是否会影响依赖于我的库的用户运行其 React 应用所需的库或步骤？

• 我正在编写的库依赖于 React，但它没有任何 jsx/tsx 文件。不过它会有一些自定义的 React 钩子(Hook)。我还需要包含 @babel/preset-react 插件吗？

Answer 1

Rollup 或 Webpack 是模块打包器，它们只处理文件打包。 要将 Javascript 最新代码转换为浏览器兼容代码，我们需要像 babel 这样的转译器。 Rollup 和 Webpack 都有插件可以处理这种代码转换，Babel 就是这样一个插件。

所以 Babel 和 Rollup 是不同的工具，我们可以在 Rollup 中使用 Babel 来转译 Javascript。

让我们将 Webpack 作为您问题的打包器

typescript 呢？

我们需要一些插件来将它转换成js，Webpack有ts-loader这样的插件

入口点呢？

您可以使用 ts 或 js，这并不重要，因为模块 bundler 会在捆绑期间根据 Webpack 配置将每个文件分配给它对应的插件来处理。

我的所有文件都可以是 *.ts 格式吗？入口点是否需要是 javascript 文件？...

是的，您可以在 .ts 中拥有所有文件。如果您有 jsx 代码，您可能需要 .tsx。

我听说我应该为 commonjs 和 esnext 编译我的代码...

是的，这会影响用户，因为他们的浏览器可能很旧并且不支持最新代码。

我正在编写的库依赖于 React，但它不会有任何 jsx/tsx 文件...

您有 jsx 代码吗？如果有，那么您将需要它。

注意:如果您的完整代码在 typescript 中，则不需要 babel，只需使用以下链接中的 ts-loader。

您可能希望遵循这个简单的 Webpack typescript 配置 - https://webpack.js.org/guides/typescript/