如何搭建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有关。我错过了什么吗？

- BrunoLM

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'],
},

- Shaun Luttin

---

在webpack文件中重复预设配置是必要的吗？在babelrc中指定它们不足够吗？ - Piotr Sobczyk

随着转移到 babel@7，这是正确的答案^。 - arete

ts-loader和使用babel-loader与Babel 7的区别之一是，在转译过程中，ts-loader会进行类型检查，而babel-loader则不会。在本回答中链接的有关使用Babel 7的TypeScript的说明建议单独调用tsc进行类型检查。 - Ben Regenspan

命名空间怎么样？它们不被支持。 - AbuDawood

ts-loader也有额外的选项，如自定义tsconfig路径。目前（至少在2020年），不建议使用babel-loader代替ts-loader。 - Eric Burel

@EricBurel：我不同意你的观点。在使用Babel时不需要ts-loader。这就是重点。无论是Babel本身还是tsc本身都将达到一种状态，不需要插件即可实现相同的结果。建议人们依赖社区维护的插件通常并不具备未来的可靠性。FYI：我不使用ts-loader，因为我不需要其中的功能。我追求稳定性。 - VimNing

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。

- BrunoLM

Answer 3

(4,32): 错误 TS2304: 找不到名称为 'regeneratorRuntime' 的内容。

这是将babel的输出结果传递给ts时出现的症状。这个顺序是错误的。

解决方法

你的编译设置应该将TS输出结果传递给Babel。

或者，你可以使用@babel/preset-typescript仅使用Babel编译TypeScript。

更多信息

Babel编译TypeScript：https://babeljs.io/docs/en/babel-preset-typescript

- basarat

---

修复应避免链接到外部网站，这会导致信息分散。相反，考虑在您的答案中提供相同的想法。 - monokrome

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,
            },
          },
        ],
      },
    ],
  },
}

使用了我的 electron-forge 设置。
（使用NodeJS 19.0.0，TypeScript 5.0.2，@babel/core 7.21.3，babel-loader 9.1.2 和 ts-loader 9.2.2 运行）

- donnikitos

---

transpileOnly选项在ts-loader中应该只在开发模式下设置为true，但是在构建时仍然需要进行类型检查。 - Nanachi