如何设置TypeScript + Babel + Webpack？

Question

我有这些依赖:

"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

{
  "presets": [
    "es2015",
    "stage-0"
  ]
}

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "noImplicitAny": false,
        "sourceMap": false,
        "outDir": "built"
    },
    "exclude": [
        "node_modules"
    ]
}

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

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();
}());

使用此设置它确实有效,我可以构建并运行它(正确记录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'.

它似乎与某些事情有关babel-polyfill.

我错过了什么？

Answer 1

Babel 7不需要ts-loader.

从Babel 7开始,这ts-loader是不必要的,因为Babel 7理解TypeScript.此处提供了TypeScript + Babel7 + Webpack设置的完整详细信息.

没有ts-loader的设置概述.

安装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

配置其他.babelrc插件和预设.

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript"
    ],
    "plugins": [
        "@babel/proposal-class-properties",
        "@babel/proposal-object-rest-spread"
    ]
}

并更新您的webpack.config.js(为清晰起见,省略了其他代码).

module: {
  rules: [
  {
     test: /\.(js|jsx|tsx|ts)$/,
     exclude: /node_modules/,
     loader: 'babel-loader'
    }
  ]
},
resolve: {
  extensions: ['*', '.js', '.jsx', '.tsx', '.ts'],
},

Answer 2

装载机总是从右到左执行,因此改为

test: /\.tsx?$/, loaders: ['babel-loader', 'ts-loader'], exclude: /node_modules/

修复了这个问题,因为它将ts-loader首先运行.

完整的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/
    }],
  }
};

示例项目brunolm/typescript-babel-webpack

Answer 3

(4,32):错误TS2304:找不到名称'regeneratorRuntime'.

这是的输出的症状babel是越来越馈送到ts.这个顺序是错误的

固定

使用此处所述的设置:http://blog.johnnyreilly.com/2015/12/es6-typescript-babel-react-flux-karma.html

Answer 4

这个线程有点过时了......
如果你想在 2023 年将babel与 ts-loader一起使用：

安装

npm install -D babel-loader @babel/core @babel/preset-env

Webpack 加载器配置

{
  entry: './src/index.tsx',
  // ... your other webpack configs
  module: {
    // ... your other module configs
    rules: [
      // ... your other rolues configs
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                ['@babel/preset-env', { targets: 'defaults' }],
              ],
            },
          },
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
            },
          },
        ],
      },
    ],
  },
}

使用我的电子铸造装置进行了测试。
（使用TypeScript 5.0.2、@babel/core 7.21.3、babel-loader 9.1.2和ts-loader 9.2.2运行NodeJS 19.0.0）