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

猜你喜欢