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依赖项：

(str.match(/code (\d+)/)

我相信您还需要指定要使用的预设，因此请更新您的babel加载程序：

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

到此：

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

Answer 2

解决了它。加载器的配置应如下所示：

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

这确保了babel在打字稿之前运行。

Webpack ES6模块捆绑带打字稿和Babel

2 个答案: