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"]}