入门webpack(四) 说说babel

什么是babel
babel is a JavaScript Compiler,这是官网上的一句话，简单来说，babel是一个转译工具，目标是对使用当前浏览器还没有完全支持的JavaScript规范比如ES2016，ES2017,TypeScrit等开发的代码进行转译，转译后的代码浏览器就能支持并解析。

2.babel怎么用

安装babel

npm install babel-loader babel-core --save-dev  //普通版本

npm install babel-loader@8.0.0-beta.0 @babel/core -- save-dev //最新版本

基础使用

moduls.exports = {
    entry: {...},
    output: {...},
    module: {
        rules: [ // rules的每个对象代表一个规则
            {
                test: /\.js$/,
                use: 'babel-loader'
                exclude: '/nodule_modules/'
            }
        ]   
    }
}

这一步只是配置了babel,但是babel并不知道按照怎样的规范进行转译，所以需要使用babel-presets指定规范，一般开发使用babel-preset-env

安装babel-prset-env

npm install @babel/preset-env --save-dev   // 当前最新版

npm install babel-preset-env --save-dev   // 基础版本

使用

module.exports = {
    entry: {...},
    output: {...},
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options:{
                        presets:[
                            ['@babel/preset-env',{
                                targets: {
                                    browsers: ['> 1%', 'last 2 version']            
                                }
                            }]
                        ]
                    }
                }
            }
        ]
    }
}

使用了babel-presets时，use后不直接写插件名'babel-loader' ,在use对象的loader键中指定插件名'babel-loader' ,options对象指定presets,presets是一个数组:在数组中指定babel-presets:’@babel/preset-env’,target对象指定按照什么目标编译。这里可以指定浏览器型号，浏览器版本，浏览器份额等等。

babel只能转移部分最新规范，所以我们还需要babel相关的插件babel polyfill和babe runtime transform来进行拓展。

babel polyfill 全局，针对应用
babel runtime transform局部，开发框架给第三方使用采取此插件。

安装babel polyfill

扫描二维码关注公众号，回复： 922989 查看本文章

npm install babel-polyfill --save

使用

import 'babel-polyfill' // 在需要使用babel-polyfill 的js文件import

安装babel transform runtime

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

npm insatll babel-runtime --save

使用

在.babelrc里配置

 {
    "presets": [
      ["@babel/preset-env", {
        "targets": {
          "browsers": ["> 1%", "last 2 version"]
        }
      }]
    ],
    "plugins": ["@babel/transform-runtime"]
}

tips：

--save-dev   //package.json文件中指定devDependencies依赖

--save     
//  package.json文件中指定dependencies依赖,打包发布后还需要依赖，比如jquery.js

入门webpack(四) 说说babel

猜你喜欢