2017-11-04 318 views
1

当我单独运行babel时,它会读取.babelrc并按预期进行转换。但是,当我使用babel-loader运行webpack时,输出的代码与原始代码非常相似,但我希望它可以在旧版浏览器中运行。Webpack babel-loader不读取.babelrc(支持旧浏览器)

.babelrc

{ 
    "presets": ["env"] 
} 

webpack.config.js

module.exports = { 
    entry: __dirname + '/src/index.js', 
    output: { 
     filename: 'bundle.js', 
     publicPath: '/dist', 
     path: __dirname + '/dist' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js?/, 
       include: __dirname + 'src', 
       loader: 'babel-loader' 
      } 
     ] 
    }, 
    devServer: { 
     inline: true, 
     port: 8080, 
     historyApiFallback: { 
      index: 'index.html' 
     } 
    } 
} 
+0

如果我没记错的话,它应该是'targets'的情况下直接说'browsers'位之内。您也可以在'.browserslistrc'上使用浏览器定义来获得相同的结果。 –

+0

没关系。试试'.browserslistrc'。它应该捡起来。 –

+0

另外请记住,您当前的浏览器定义将不会包含很多旧浏览器。如果你想支持IE 11,你应该在那里包含它。 –

回答

0

编辑的webpack.config.js和除去.babelrc

https://webpack.js.org/loaders/babel-loader/

webpack.config.js

module.exports = { 
    entry: __dirname + '/src/index.js', 
    output: { 
     filename: 'bundle.js', 
     publicPath: '/dist', 
     path: __dirname + '/dist' 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.js$/, 
       exclude: /(node_modules|bower_components)/, 
       use: { 
        loader: 'babel-loader', 
        options: { 
         presets: ['env'] 
        } 
       } 
      } 
     ] 
    }, 
    devServer: { 
     inline: true, 
     port: 8080, 
     historyApiFallback: { 
      index: 'index.html' 
     } 
    } 
} 
+0

有问题,你定义在'module.loaders [{...}]'内加载,并且在答案中,你使用的是'module.rules [{...}]',这两种语法是否做同样的事情! ! –

+0

我猜'loaders'是v1,'rules'是v2 +。 https://stackoverflow.com/questions/43002099/rules-vs-loaders-in-webpack-whats-the-difference – getmicah

0

我面临着类似的问题,这就是我发现了什么。在.babelrc

{ 
    "presets": [ 
    ["env", { 
     "targets": { 
     "browsers": ["last 2 versions", "IE >= 8"] 
     }, 
     "debug": true 
    }] 
    ] 
} 

建立debug选项显示browsering作品:

使用对象:{ “铬”: “61”, “机器人”: “4.4.3”, “边缘” : “15”, “火狐”: “56”, “即”: “8”, “IOS”: “10.3”, “野生动物园”: “10.1”}

模块变换:CommonJS的

使用插件:check-es2015-co nstants {“android”:“4.4.3”,“ie:”8“}
transform-es2015-arrow-functions {”android“:”4.4.3“,”ie“:”8“}
transform-es2015-block-scoped-functions {“android”:“4.4.3”,“ie”:“8”}
transform-es2015-block-scoping {“android”:“4.4.3”,“ie “:”8“}
transform-es2015-classes {”android“:”4.4.3“,”ie“:”8“}
transform-es2015-computed-properties {”android“:”4.4.3 “,”ie“:”8“}
transform-es2015-destructuring {”android“:”4.4.3“,”edge“:”15“,”ie“:”8“}
transform-es2015 -duplicate-keys {“android”:“4.4.3”,“ie”:“8”}
变换-es2015-for-of {“android”:“4.4.3”,“ie”:“8”}
transform-es2015-function-name {“android”:“4.4.3”,“edge” : “15”, “IE”: “8”} ...

我的WebPack配置看起来就像

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

但是,这并不能解决所有的问题。调查transpiled分配,我找不到一些预期的东西,如Array.prototype.reduce应该填充IE8的polyfill。但这个想法(据我所知),它不是babel-core转播的责任。我们需要使用babel-polyfillcore-js。因此,填充webpack配置是一项单独的任务,并且在.babelrc中设置browsers选项只是故事的一部分。

也见相关的GitHubStackOverflow主题。