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

Question

我有一个简单的设置，我使用 webpack-stream 在 gulp 中使用 web pack。我正在尝试将我的打字稿转换为 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));

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

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

Answer 2

解决了。加载程序的配置应如下所示：

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

这确保了 babel 在 typescript 之前运行。

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

Webpack ES6 Module Bundling w/ Typescript and Babel

typescript

gulp

webpack

babeljs

es6-modules