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

Question

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

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
| }

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

我看到了关于 Babel 和关于 Rollup 的文章，但我很困惑我需要哪些（或两者都需要？）为什么。许多过时的 incomplete/lazy 教程文章似乎没有帮助。

你能帮我设置一下我需要的东西吗？这是我的测试库的当前文件结构，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 的插件，但我在示例中省略了它，因为为了简单起见，我想要一个全新的未触及的打字稿库清酒。帮我从头开始。

我还有其他问题：

我的所有文件都可以是 *.ts 格式吗？入口点是否必须是 javascript 文件？（我假设任何 *.config.* 文件可能需要 *.js 因为你需要先从 javascript 开始，这样你就可以为项目的其余部分设置打字稿，对吗？
我听说我应该为 commonjs 和 esnext 编译我的代码。我的选择是否会影响依赖于我的库的用户运行他们的 React 应用程序所需的库或步骤？
我正在编写的库依赖于 React，但它不会有任何 jsx/tsx 文件。不过它会有一些自定义的 React 钩子。我还需要包含 @babel/preset-react 插件吗？

Answer 1

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

所以Babel和Rollup是不同的工具，我们可以在Rollup里面使用Babel转译Javascript.

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

打字稿呢？

我们需要一些插件来将其转换为js，Webpack

有ts-loader这样的插件

入口点呢？

您可以使用 ts 或 js，这并不重要，因为模块打包器会根据打包期间的 Webpack 配置将每个文件分配给其相应的插件来处理。

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

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

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

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

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

你有 jsx 代码吗？如果有，你将需要这个。

注意：如果你的完整代码是打字稿，你不需要babel，你可以简单地使用下面的ts-loader link.

您可能需要遵循这个简单的 Webpack 打字稿配置 - https://webpack.js.org/guides/typescript/

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

Module parse failed? I need help setting up Babel

reactjs

typescript

webpack

babeljs