Webpack babel-loader不讀取.babelrc（支持舊瀏覽器）

當我單獨運行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' 
     } 
    } 
}

來源

2017-11-04 getmicah

如果我沒記錯的話，它應該是'targets'的情況下直接說'browsers'位之內。您也可以在'.browserslistrc'上使用瀏覽器定義來獲得相同的結果。 –

沒關係。試試'.browserslistrc'。它應該撿起來。 –

另外請記住，您當前的瀏覽器定義將不會包含很多舊瀏覽器。如果你想支持IE 11，你應該在那裏包含它。 –

編輯的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' 
     } 
    } 
}

來源

2017-11-04 05:32:10 getmicah

有問題，你定義在'module.loaders [{...}]'內加載，並且在答案中，你使用的是'module.rules [{...}]'，這兩種語法是否做同樣的事情！！ –

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

我面臨着類似的問題，這就是我發現了什麼。在.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-polyfill或core-js。因此，填充webpack配置是一項單獨的任務，並且在.babelrc中設置browsers選項只是故事的一部分。

也見相關的GitHub和StackOverflow主題。

來源

2017-11-20 04:14:51 dhilt

Webpack babel-loader不讀取.babelrc（支持舊瀏覽器）

回答

相關問題