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

回答

相關問題