Javascript 如何设置 TypeScript + Babel + Webpack？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38320220/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to setup TypeScript + Babel + Webpack?
提问by BrunoLM
I have these dependencies:
我有这些依赖项：
"devDependencies": {
"@types/node": "^4.0.27-alpha",
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-0": "^6.5.0",
"ts-loader": "^0.8.2",
"typescript": "^2.0.0",
"webpack": "^1.13.1"
}
.babelrc
.babelrc
{
"presets": [
"es2015",
"stage-0"
]
}
tsconfig.json
配置文件
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"noImplicitAny": false,
"sourceMap": false,
"outDir": "built"
},
"exclude": [
"node_modules"
]
}
webpack.config.js
webpack.config.js
module.exports = {
entry: ['babel-polyfill', './src/'],
output: {
path: __dirname,
filename: './built/bundle.js',
},
resolve: {
modulesDirectories: ['node_modules'],
extensions: ['', '.js', '.ts'],
},
module: {
loaders: [{
test: /\.tsx?$/, loaders: ['ts-loader', 'babel-loader'], exclude: /node_modules/
}],
}
};
/src/index.ts
/src/index.ts
async function foo() {
const value = await bar();
console.log(value);
}
function bar() {
return new Promise((resolve, reject) => {
return resolve(4);
});
}
(async function run() {
await foo();
}());
With this setup it does work, I can build and run it (logs 4 correctly). However I'm always getting some errors on webpack:
使用此设置它确实有效，我可以构建和运行它（正确记录 4）。但是我总是在 webpack 上遇到一些错误：
ERROR in ./src/index.ts
(4,32): error TS2304: Cannot find name 'regeneratorRuntime'.
ERROR in ./src/index.ts
(6,12): error TS2304: Cannot find name 'regeneratorRuntime'.
ERROR in ./src/index.ts
(31,451): error TS2346: Supplied parameters do not match any signature of call target.
ERROR in ./src/index.ts
(40,33): error TS2304: Cannot find name 'regeneratorRuntime'.
ERROR in ./src/index.ts
(41,12): error TS2304: Cannot find name 'regeneratorRuntime'.
It seems it has something to do with babel-polyfill.
好像和babel-polyfill.
What am I missing?
我错过了什么？
采纳答案by basarat
(4,32): error TS2304: Cannot find name 'regeneratorRuntime'.
(4,32)：错误 TS2304：找不到名称“regeneratorRuntime”。
This is a symptom that the output of babelis getting fed to ts. This order is wrong
这是 的输出babel被馈送到的症状ts。这个顺序错了
Fix
使固定
Use the setup as described here : http://blog.johnnyreilly.com/2015/12/es6-typescript-babel-react-flux-karma.html
使用此处描述的设置：http: //blog.johnnyreilly.com/2015/12/es6-typescript-babel-react-flux-karma.html
回答by Shaun Luttin
Babel 7 does not need ts-loader.
Babel 7 不需要 ts-loader。
As of Babel 7 the ts-loaderis unnecessary, because Babel 7 understands TypeScript. Complete details of a TypeScript + Babel7 + Webpack setup are here.
从 Babel 7 开始，这ts-loader是不必要的，因为Babel 7 理解 TypeScript。TypeScript + Babel7 + Webpack 设置的完整细节在这里。
An overview of the set up without ts-loader.
不使用 ts-loader 的设置概览。
Install Babel's TypeScript support. Only @babel/preset-typescriptis mandatory; the other three add additional features that TypeScript supports.
安装 Babel 的 TypeScript 支持。只有@babel/preset-typescript是强制性的；其他三个添加了 TypeScript 支持的附加功能。
npm install --save-dev @babel/preset-typescript
npm install --save-dev @babel/preset-env
npm install --save-dev @babel/plugin-proposal-class-properties
npm install --save-dev @babel/plugin-proposal-object-rest-spread
Configure the additional .babelrcplugins and presets.
配置额外的.babelrc插件和预设。
{
"presets": [
"@babel/preset-env",
"@babel/preset-typescript"
],
"plugins": [
"@babel/proposal-class-properties",
"@babel/proposal-object-rest-spread"
]
}
And update your webpack.config.js(other code is omitted for clarity).
并更新您的webpack.config.js（为清楚起见省略了其他代码）。
module: {
rules: [
{
test: /\.(js|jsx|tsx|ts)$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx', '.tsx', '.ts'],
},
回答by BrunoLM
Loaders always execute right to left, so changing to
加载程序总是从右到左执行，因此更改为
test: /\.tsx?$/, loaders: ['babel-loader', 'ts-loader'], exclude: /node_modules/
Fixed the issue since it is going to run ts-loaderfirst.
修复了该问题，因为它将ts-loader首先运行。
Full webpack.config.js file
完整的 webpack.config.js 文件
module.exports = {
entry: ['babel-polyfill', './src/'],
output: {
path: __dirname,
filename: './dist/index.js',
},
resolve: {
extensions: ['', '.js', '.ts'],
},
module: {
loaders: [{
test: /\.ts$/, loaders: ['babel-loader', 'ts-loader'], exclude: /node_modules/
}],
}
};
Sample project brunolm/typescript-babel-webpack
