我正在尝试使用webpack
构建一个小项目node.js + ts
。
tsconfig.json
{
"compilerOptions": {
"lib": ["ESNext"],
"target": "ES2020",
"module": "NodeNext",
"moduleResolution": "NodeNext",
"esModuleInterop": true,
"types": ["node"],
"allowSyntheticDefaultImports": true,
"rootDir": "./"
},
}
我将它添加到了package.json
的行中:"type": "module"
webpack.config.ts
import * as path from 'path';
import * as webpack from 'webpack';
import { fileURLToPath } from 'url';
const __dirname = path.dirname(fileURLToPath(import.meta.url));
const PATHS = {
entry: path.resolve(__dirname, 'src/server/index.ts'),
output: path.resolve(__dirname, 'dist'),
};
const config: webpack.Configuration = {
target: 'node',
entry: PATHS.entry,
output: {
path: PATHS.output,
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.ts(x?)$/,
use: 'ts-loader',
exclude: '/node_modules/',
},
],
},
resolve: {
extensions: ['*', '.js', '.jsx', '.json', '.ts', '.tsx'],
},
};
export default config;
通过运行命令
"build": "webpack --config config/webpack.config.ts --mode development"
,我遇到了一个错误:
我尝试在我的[webpack-cli] 加载失败 '/node_esm/webpack.config.ts' 配置 [webpack-cli] TypeError [ERR_UNKNOWN_FILE_EXTENSION]: 未知的文件扩展名 ".ts",位于 /node_esm/webpack.config.ts
config.json
中添加"ts-node": { "esm": true}
,但这并没有帮助我解决问题。我需要怎么做才能使用webpack构建应用程序呢?
- node: v16.18.1
- ts-loader: v9.4.2
- typescript: v4.9.4
- webpack: v5.75.0
- webpack-cli: 5.0.1
{
"compilerOptions": {
"target": "ES5",
"module": "CommonJS",
"moduleResolution": "NodeNext",
"esModuleInterop": true,
"types": ["node"],
"allowSyntheticDefaultImports": true,
"rootDir": "./"
}
}
错误仍然存在。 第二个选项是为ts-node添加设置:
您可以保持tsc的"module":"ESNext",如果您使用webpack或其他构建工具,则可以为ts-node设置覆盖。
{
"compilerOptions": {
"target": "ES2020",
"module": "NodeNext",
"moduleResolution": "NodeNext",
"esModuleInterop": true,
"types": ["node"],
"allowSyntheticDefaultImports": true,
"rootDir": "./"
},
"ts-node": {
"compilerOptions": {
"module": "CommonJS"
}
}
}
同时在这一点上,我尝试添加
{
"compilerOptions": {
"module": "ESNext" // or ES2015, ES2020
},
"ts-node": {
// Tell ts-node CLI to install the --loader automatically, explained below
"esm": true
}
}
正如 TypeScript 文档所述,第三个选项是安装 tsconfig-paths 包,但它也没有帮助。在所有情况下,错误仍然与之前写的一样。
package.json
{
"name": "node_esm",
"version": "1.0.0",
"description": "",
"type": "module",
"main": "index.js",
"scripts": {
"watch": "webpack --config config/webpack.config.ts --mode development --watch",
"build": "webpack --config config/webpack.config.ts --mode development"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"cross-env": "^7.0.3",
"express": "^4.18.2"
},
"devDependencies": {
"@types/express": "^4.17.15",
"@types/node": "^18.11.18",
"@types/webpack": "^5.28.0",
"circular-dependency-plugin": "^5.2.2",
"clean-webpack-plugin": "^4.0.0",
"nodemon": "^2.0.20",
"ts-loader": "^9.4.2",
"ts-node": "^10.9.1",
"tsconfig-paths": "^4.1.2",
"tsconfig-paths-webpack-plugin": "^4.0.0",
"typescript": "^4.9.4",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1",
"webpack-node-externals": "^3.0.0"
}
}
ts-node
启动 webpack 构建。你有阅读过 https://webpack.js.org/configuration/configuration-languages/#typescript 吗? - morganneyts-node
。 - morganney