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一起使用

回答

相关问题