javascript - tsconfig.json 路径在构建中未解析
问题描述
我的导入在编码时工作正常,但是当我使用 构建项目时tsc
,导入的文件不会被解析为有效路径。
这是我的tsconfig.json
:
{
"compilerOptions": {
"target": "ES2018" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
"module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
"lib": ["es6"] /* Specify library files to be included in the compilation. */,
"allowJs": true /* Allow javascript files to be compiled. */,
"outDir": "build" /* Redirect output structure to the directory. */,
"rootDir": "src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
"strict": true /* Enable all strict type-checking options. */,
"noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */,
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
"moduleResolution": "node",
"resolveJsonModule": true /* Include modules imported with '.json' extension */,
"skipLibCheck": true /* Skip type checking of declaration files. */,
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
"allowSyntheticDefaultImports": true,
"baseUrl": "src",
"paths": {
"@root/*": ["../*"],
"@src/*": ["./*"]
}
}
}
我scripts
的package.json
:
"scripts": {
"dev": "nodemon",
"build": "rm -rf ../build && tsc",
"start": "yarn run build && node build/index.js",
"lint": "eslint . --ext .ts"
},
json 工作得很好,这nodemon
要归功于tsconfig-paths
:
{
"watch": ["src"],
"ext": ".ts,.js",
"ignore": [],
"exec": "ts-node -r tsconfig-paths/register ./src/index.ts"
}
当我尝试运行yarn start
时,它会在我的api/build/index.js
Error: Cannot find module '../src/app'
该代码需要一个不存在的文件,../src/app
. 应该是./app
。
文件夹结构build
如下:
build
routes
index.js
users.js
startup
routes.js
app.js
index.js
我现在一直在敲我的头,我不确定我做错了什么。
我怎样才能使这项工作?
解决方案
为了解决这个问题,我tsc
用Babel
+代替babel-plugin-module-resolver
了构建我的项目,现在它可以按预期工作了。我将发布整个 .json 文件以防有人遇到同样的问题(检查 中的build
脚本package.json
)。此代码应该用于 Node.js 14.xx 应用程序,因此如果您正在为不同的目标进行开发,则需要根据需要更改文件targets
中的代码。.babelrc
tsconfig.json
{
"compilerOptions": {
"sourceMap": true,
"inlineSources": true,
"target": "ES2018" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
"module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
"lib": ["ESNEXT"] /* Specify library files to be included in the compilation. */,
"allowJs": true /* Allow javascript files to be compiled. */,
"outDir": "build" /* Redirect output structure to the directory. */,
"rootDir": "../" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
"strict": true /* Enable all strict type-checking options. */,
"noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */,
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
"moduleResolution": "node",
"resolveJsonModule": true /* Include modules imported with '.json' extension */,
"skipLibCheck": true /* Skip type checking of declaration files. */,
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
"allowSyntheticDefaultImports": true,
"baseUrl": "src",
"paths": {
"@root/*": ["../*"],
"@src/*": ["./*"]
}
}
}
package.json
{
"name": "api",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "nodemon",
"typecheck": "tsc --noEmit",
"debug": "yarn build && node --inspect --inspect-brk build/",
"test": "jest --watchAll",
"build": "rm -rf build/ && babel src --source-maps --extensions '.js,.ts,.tsx' --ignore '**/*.test.ts' -d build",
"start": "export NODE_ENV=production && yarn run build && node build/index.js",
"lint": "eslint . --ext .ts",
"checks": "yarn lint & yarn typecheck"
},
"jest": {
"testEnvironment": "node",
"coveragePathIgnorePatterns": [
"/node_modules/"
]
},
"dependencies": {
"config": "^3.3.3",
"cors": "^2.8.5",
"express": "~4.16.1",
"morgan": "~1.9.1",
"node-webcam": "^0.7.0",
"winston": "^3.3.3"
},
"devDependencies": {
"@babel/cli": "^7.12.10",
"@babel/core": "^7.12.10",
"@babel/polyfill": "^7.12.1",
"@babel/preset-env": "^7.12.11",
"@babel/preset-typescript": "^7.12.7",
"@types/config": "^0.0.37",
"@types/cors": "^2.8.9",
"@types/debug": "^4.1.5",
"@types/express": "^4.17.9",
"@types/morgan": "^1.9.2",
"@types/node": "^14.14.14",
"@types/supertest": "^2.0.10",
"@typescript-eslint/eslint-plugin": "^4.10.0",
"@typescript-eslint/parser": "^4.10.0",
"babel-plugin-module-resolver": "^4.1.0",
"eslint": "^7.16.0",
"jest": "^26.6.3",
"nodemon": "^2.0.6",
"supertest": "^6.0.1",
"ts-node": "^9.1.1",
"tsconfig-paths": "^3.9.0",
"typescript": "^4.1.3"
}
}
.babelrc
{
"presets": [
"@babel/preset-typescript",
[
"@babel/preset-env",
{
"targets": { "node": 14 }
}
]
],
"plugins": [
[
"module-resolver",
{
"root": "./src",
"alias": {
"@root": ["./"],
"@src": ["./src"]
},
"extensions": [".js", ".ts"]
}
]
],
"sourceMaps": true
}
推荐阅读
- python - 从 QSqlQuery 返回列名
- linux - 使用 Xinput 2 时如何使用 XEvent?
- android - 使用 Serializable 传递 Arraylist
- ajax - Cordova:无法在“XMLHttpRequest”上执行“发送”
- vb.net - VB.net:“输入字符串的格式不正确。” 使用 Convert.ToDouble
- semantic-release - 在 preversion 步骤中获取版本
- c - 获取退出代码总是返回 1
- html - 如何在模板中正确使用带有 HTML CSS JS 的 codepen 笔?
- 3d - Blender细分曲面、镜像修改器问题
- amazon-web-services - 使用 Cloudfront 限制对 S3 存储桶的访问