什麼是使babel6支持Array.from在webpack中的最佳方式？

我使用以下的WebPack配置：什麼是使babel6支持Array.from在webpack中的最佳方式？

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    plugins: [ 
     new webpack.ProvidePlugin({ 
      'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch' 
     }) 
    ], 
    entry: { 
     demo1 : ['babel-polyfill', './src/js/page/demo1.js'] 
    }, 

    output: { 
     path: 'dist/js/page', 
     filename: '[name].js' 
    }, 
    devtool: 'eval-source-map', 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       include: [ 
        path.resolve(__dirname, "src") 
       ], 
       exclude: path.resolve(__dirname, "node_modules"), 
       loader: "babel-loader", 
       query: { 
        plugins: ['transform-runtime'], 
        presets: ['es2015', 'react'] 
       } 
      }, 
      { test: /\.scss$/, loader: 'style!css!sass?sourceMap'} 
     ] 
    }, 
    resolve: { 
     root: path.resolve(__dirname, "src"), 
     extensions: ['', '.js', '.json', '.scss'] 
    } 
};

，因爲它表明，我合併全babel-polyfill模塊的入口文件demo1.js支持Array.from。但我認爲這不是一個好主意，因爲它會使入口文件太重。

所以它了這裏的任何loader/plugin/preset，我可以用它來支持的WebPack Array.from因爲什麼babel-polyfill呢？

來源

2015-12-22 VaJoy Larn

AFAIK，babel-runtime也加載了polyfill。 –

機會是，如果您在瀏覽器中工作，則需要整個填充。你看到你的方法有什麼實際的缺點嗎？這通常是我推薦的。雖然你通常不會在同一時間使用'transform-runtime'。 – loganfsmyth

@FelixKling你是對的我應該刪除那個插件，但重點是，我更喜歡使用插件，而不是合併整個polyfill模塊到文件中的原因。我認爲使用插件最終會使輸出文件的大小變小（也許它不正確？）。另外，每次在webpack中添加一個新的入口文件時，我都不想添加'babel-polyfill'。 config.js'（在使用插件的場景中，我只需要添加條目文件）。那麼這裏是否可以使用任何插件來替換支持'Array.from'的'transform-runtime'？ –

你會想直接與core-js進行整合，這就是巴貝爾在引擎蓋下所使用的。然後，您可以通過明確要求單個模塊來選擇要提供兼容性的功能。

require('core-js/fn/array/from'); 

// Then, from within any module: 
Array.from(new Set([1, 2, 3, 2, 1])); // => [1, 2, 3]

這是巴貝爾6將通過預設有效地爲您設置。

來源

2015-12-26 12:28:44

我需要'npm install core-js'嗎？（你說，Babel在引擎蓋下使用它，但我沒有這方面的運氣。Map，Set和大量東西，但Array函數，即'Array.includes（）'，nope ... –

我知道這個線程很舊，但我偶然發現它，而谷歌搜索。

另一種方法是溝babel-polyfill並使用dynamic-polyfill。 https://www.npmjs.com/package/dynamic-polyfill

你可以用的東西去像

import polyfill from 'dynamic-polyfill' 

polyfill({ 
    fills: ['Array.from'], 
    afterFill() { 
    // your code 
    } 
})

然後，瀏覽器下載，只有當它需要它的填充工具。

來源

2017-11-23 13:07:06 PascalAOMS

什麼是使babel6支持Array.from在webpack中的最佳方式？

回答

相關問題