typescript - 如何配置 create-react-app typescript 以自动将 ts-loader 用于基于 typescript 的节点模块？

Question

所以我有一个名为 client 的项目。客户端需要来自核心的组件和服务。核心是一个尚未编译和构建的 typescript 项目。为了更快地开发客户端应用程序，我需要同时开发核心和客户端。在这方面，我创建了一个到客户端核心的 npm 链接。但是，当我使用核心代码时，我收到一条错误消息。

Module parse failed: Unexpected token (7:34)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

我怀疑 webpack 没有使用适当的加载器来构建 typescript 节点模块。有没有办法在不弹出配置文件的情况下解决这个问题。

Answer 1

create-react-app 的 typescript 版本使用 babel-loader 将 typescript 转换为 javascript。 您遇到的问题在这里:

test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),

它只编译 paths.appSrc 文件夹中的 ts|tsx ，该文件夹是主 src 文件夹，但链接的模块位于该文件夹之外。 您可以通过编辑包含规则或将其完全删除来修复它，因此您必须弹出。

如果您不想弹出，可以在构建链中添加一个脚本来修改 node_modules\react-scripts\config 下的 webpack.config.js 文件> 在 npm install 之后，但这是一个不好的做法。

这就是我正在使用的:

import * as fs from 'fs';

export function deleteLineFromFile(props: { path: string; lineToRemove: { index: number; value: string } }) {
  const data = fs.readFileSync(props.path, 'utf-8');
  const array = data.split('\n');
  const value = array[props.lineToRemove.index - 1].trim();

  if (value === props.lineToRemove.value) {
    array.splice(props.lineToRemove.index - 1, 1);
    const newData = array.join('\n');
    fs.writeFileSync(props.path, newData, 'utf-8');
  }
}

deleteLineFromFile({
  path: 'node_modules/react-scripts/config/webpack.config.js',
  lineToRemove: { index: 384, value: 'include: paths.appSrc,' },
});