Webpack i18n插件不能與babel es6一起使用

我正在嘗試將i18n-webpack-plugin和babel-loader一起使用。Webpack i18n插件不能與babel es6一起使用

我的WebPack配置：

var path  = require("path"), 
    I18nPlugin = require("i18n-webpack-plugin"), 
    webpack  = require("webpack"), 
    languages = { 
     "en": null, 
     "es": require("./src/locale/es.po.json") 
    }; 

module.exports = Object.keys(languages).map(function(language) { 
    return { 
     name: language, 
     entry: { 
      home: "./src/static/scripts/script.js", 
      alt: "./src/static/scripts/alt.js" 
     }, 
     output: { 
      path: path.join(__dirname, "dist/static/scripts"), 
      filename: language + ".[name].output.js" 
     }, 
     modules: { 
      loaders: [ 
       { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: ["babel-loader"] 
       }, 
      ] 
     }, 
     plugins: [ 
      new I18nPlugin(
       languages[language] 
      ), 
      new webpack.optimize.UglifyJsPlugin({minimize: true}) 
     ] 
    }; 
});

我收到的錯誤：

ERROR in ./src/static/scripts/script.js 
    Module parse failed: /Users/anthonydandrea/react/gulp-react-flask/src/static/scripts/script.js Line 1: Unexpected token 
    You may need an appropriate loader to handle this file type. 
    | import React from 'react';

不確定是什麼原因造成的問題。似乎從未使用過babel，並且不會讓我在第一行上執行ES6導入。注意：當我註釋掉ES6代碼時，一切正常。

來源

2015-09-28 anthony-dandrea

你嘗過'preLoaders'而是採用通天塔？該插件可能會在Babel之前添加它的加載器來運行。 – loganfsmyth

將'loaders'改爲'preLoaders'給了我同樣的錯誤。 –

我想通了。將'babel-loader'更改爲'babel'。以下完整代碼

var path  = require("path"), 
    I18nPlugin = require("i18n-webpack-plugin"), 
    webpack  = require("webpack"), 
    babel = require("babel-loader"), 
    languages = { 
     "en": null, 
     "es": require("./src/locale/es.po.json") 
    }; 

module.exports = Object.keys(languages).map(function(language) { 
    return { 
     name: language, 
     entry: { 
      home: "./src/static/scripts/script.js", 
      alt: "./src/static/scripts/alt.js" 
     }, 
     output: { 
      path: "./dist/static/scripts", 
      filename: language + ".[name].output.js" 
     }, 
     module: { 
      loaders: [ 
       { 
        test: /\.js?$/, 
        exclude: /(node_modules|bower_components)/, 
        loader: 'babel' 
       } 
      ] 
     }, 
     plugins: [ 
      new I18nPlugin(
       languages[language] 
      ), 
      new webpack.optimize.UglifyJsPlugin({minimize: true}) 
     ] 
    }; 
});

來源

2015-09-29 18:06:34

你也將它從一個數組改成了數組，這可能是這裏的實際問題。 – loganfsmyth

另一個相關的問題......應該如何加載捆綁文件？我的意思是，當我通過語言生成一個js文件時，根據網站中當前的語言加載正確的js的正常方法是什麼？應該在服務器端進行管理還是在客戶端更好？謝謝！ – benjasHu

對於我來說，在提供模板時，後端會提供語言需要的內容的上下文。類似於{％if lang =='es'％} es.bundle.js {％else％} en.bundle.js {％endif％}'就在我的模板文件中。如果用戶在使用語言時更改了語言，我只需將POST發送到後端以更改語言，並在成功執行'location.reload（）'以使用正確的包文件重新加載模板。 –

使用'loaders'作爲數組，'loader'使用字符串。

loader: 'babel?someparam!ts'

與

loaders: ['babel?someparam', 'ts']

來源

2015-12-28 12:34:41 macmillancodes

Webpack i18n插件不能與babel es6一起使用

回答

相關問題