Webpack ES6模块捆绑瓦特/ Typescript和Babel

我有一个简单的设置，我正在使用webpack-stream来使用web pack中的gulp。我正在尝试将我的打印脚本转换为javascript，并使用es6模块将我的所有模块打包到一个文件中。Webpack ES6模块捆绑瓦特/ Typescript和Babel

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

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

这种设置的结果只是transpiles我打字稿的index.ts并保持进口的文件中。我的配置有什么问题？

来源

2016-10-31 Bob

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

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

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

来源

2016-10-31 22:52:34 Bob

首先，确保你有你的所有NPM的依赖关系：

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

我相信你也需要从这个指定预设使用，因此更新您的巴贝尔装载机：

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

对此：

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

来源

2016-10-31 18:17:20 Ermish

我有一个预置为es2015的.babelrc文件，并尝试将其放入我的webpack配置中，并得到相同的结果。我没有安装babel，而是安装了babel-core，我认为这是安装babel的新方法。无论我的输出是只包含带import语句的index.ts代码的文件。 – Bob

哦对不起，我错过了。您应该尝试将babel加载器放在单独的'后加载器“部分。 [在此处查看]（https://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders）。 – Ermish

在后加载器中加入babel加载器给了我相同的结果。 – Bob

Webpack ES6模块捆绑瓦特/ Typescript和Babel

回答

相关问题