带有 Typescript 和 Babel 的 Webpack ES6 模块捆绑答案

【问题标题】：Webpack ES6 Module Bundling w/ Typescript and Babel带有 Typescript 和 Babel 的 Webpack ES6 模块捆绑
【发布时间】：2017-03-13 20:52:51
【问题描述】：

我有一个简单的设置，我使用 webpack-stream 在 gulp 中使用 webpack。我正在尝试将我的打字稿转换为 javascript，并使用 es6 模块将我的所有模块捆绑到一个文件中。

我的设置（我有一个 .babelrc 文件设置为 es2015）：

  return gulp.src('./app/index.ts')
    .pipe(webpack({
      resolve: {
        extensions: ['', '.ts', '.js']
      },
      module: {
        loaders: [
          { test: /\.ts$/, exclude: /node_modules/, loader: 'ts-loader' },
          { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }
        ]
      },
      output: {
        filename: 'bundle.js'
      }
    }))
    .pipe(gulp.dest('./build));

此设置的结果只是将我的 typescript 转换为 index.ts 并将导入保存在文件中。我的配置有什么问题？

【问题讨论】：

标签： typescript gulp webpack babeljs es6-modules

【解决方案1】：

首先，确保你拥有所有的 npm 依赖项：

"babel": "^6.5.2", "babel-preset-es2015": "^6.9.0", "babel-loader": "^6.2.5"

我相信你还需要指定要使用的预设，所以从这里更新你的 babel 加载器：

{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }

到这里：

{ loader: 'babel', test: /\.js$/, exclude: /node_modules/, query: { presets: ['es2015'] } }

【讨论】：

我有一个 .babelrc 文件，我的预设设置为 es2015，并尝试将其放入我的 webpack 配置并得到相同的结果。我没有安装 babel，而是安装了 babel-core，我认为这是安装 babel 的新方法。不管我的输出是一个文件，它只包含我的 index.ts 代码和 import 语句。
哦，对不起，我错过了。您应该尝试将 babel 加载程序放在单独的 post-loaders 部分。 Check it out here.
将 babel loader 放在 postLoaders 中会得到相同的结果。

【解决方案2】：

解决了。 loader 的配置应该是这样的：

loaders: [
  {
    loader: 'babel!ts',
    test: /\.ts$/,
    exclude: /node_modules/
  }
]

这确保 babel 在 typescript 之前运行。

【讨论】：