babel轉碼

webpack中 使用babel轉碼

ES6 轉碼ES 5

安裝webpack須要使用的loader      babel-loader 

npm install babel-loader --save-dev

安裝babel轉碼規則

npm install babel-preset-es2015 --save-dev
npm install babel-core  --save-dev

 設置webpack.config.js 引用babel-loader

var path = require('path')
module.exports = {
     entry: './src/app.js',   //設置入口
     output： {
        path: path.resolve(__dirname,'./dist'),
        publicPath: './dist/',
        filename: '[name].js'
    },
    module:{
        rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,   //exclude 不但願處理的文件 node_modules中js不會轉碼
            use: [{
                    loader: 'babel-loader',
                    options:{
                    presets: [''es2015']
                }
            }]
        }
    ]
  }
}                    

 

babel-preset-env  經過它能夠使用最新的js語法 

 插件是爲了告訴babel只編譯批准的內容，至關於babel-preset-es2015, es2016, es2017及最新版本。 

安裝babel相關插件

npm install   babel-loader babel-core babel-preset-env --save-dev

在webpack配置文件中設置 bable-loader

module: {
    rules: [
        {
            test: /\.js$/,
            exclude: '/node_modules/',
            use: {    
                loader: 'babel-loader',
                options: {
                    presets: [
                        ['env',{
                            targets: {
                                browsers: ['> 1%', 'last 2 versions']
                            }
                        }]
                    ]
                }
            },
        }
    ]
}

babel-polyfill 

 上面使用到的babel插件中  只是將部分es6 es7等高級語法 轉換成 低級普通瀏覽器支持的js代碼， 可是部分語法 好比說Set Proxy Generator等 沒轉換

 polifill 就提供了一些低版本es標準對高級特性的實現    polyfill 轉換後的代碼 使用到的新語法會生成全局代碼  會污染全局變量

安裝 

npm install  babel-polyfill --save

使用  只須要在入口js中 引入polifill   

require('bable-polyfill')

runtime-transform 

和polyfill 功能相似 可是它不會污染到全局

安裝 

npm install babel-runtime --save
npm install babel-plugin-transform-runtime --save-dev

在工做目錄.babelrc 文件中添加

{"plugins":["transform-runtime"]}