如何配置create-react-app typescript以自动使用基于typescript的节点模块的ts-loader？
如何配置create-react-app typescript以自动使用基于typescript的节点模块的ts-loader？
提问于 2020-06-02 04:43:21
所以我有一个名为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节点模块。是否有办法在不弹出配置文件的情况下解决此问题。
回答 1
Stack Overflow用户
发布于 2020-07-24 12:47:43
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文件夹，但是链接的模块在这个文件夹之外。您可以通过编辑包含规则或删除它来修复它，因此您必须弹出。
如果不想弹出，可以在构建链中添加一个脚本，在npm install之后修改node_modules\react-scripts\config下的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,' },
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62140703
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号