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

【问题标题】：How to configure create-react-app typescript to automatically use ts-loader for typescript based node modules?如何配置 create-react-app typescript 以自动将 ts-loader 用于基于 typescript 的节点模块？
【发布时间】：2020-09-20 06:06:33
【问题描述】：

所以我有一个名为 client 的项目。客户端需要来自核心的组件和服务。核心是一个尚未编译和构建的打字稿项目。为了更快地开发客户端应用程序，我需要同时开发核心和客户端。在这方面，我在客户端的核心中创建了一个 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 节点模块。有什么方法可以在不弹出配置文件的情况下解决这个问题。

【问题讨论】：

标签： typescript npm webpack node-modules create-react-app

【解决方案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 下的 npm install 之后修改 webpack.config.js 文件，但这是一种不好的做法。

这是我正在使用的：

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,' },
});

【讨论】：