babel ---七日打卡

前言:

@babel是私有包的表示方法,@后面接的是一个作用区域scope,也可以是这个包的归属者。

babel是什么?

Babel 是一个 JavaScript 编译器。
Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
babel的功能主要体现在以下几个方面:
1.语法转换
2.通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
3.源码转换 (codemods)

一、@babel/polyfill

使用场景

在日常工作中,我们用vue-cli搭建了一个项目在完成开发、发布、上线之后,就很容易遇到问题,比如在chorme浏览器中可以正常运行,但是在百度浏览器上运行的时候会发现控制台报这种错误:“vuex requires a Promise polyfill in this browser”,通过分析可知这段报错告诉我们,一些低版本的浏览器对es6新语法并不支持,这时应该怎么办呢？经过一番百度我们知道通过安装@babel/polyfill可以解决这个问题。

原理解释

由于 Babel 只转换语法(如箭头函数)， 所以需要使用 @babel/polyfill来支持新的全局变量，例如Promise 、新的原生方法如 String.padStart (left-pad) 等。 解决低版本的浏览器对es6新语法不支持的问题。

安装:

npm install --save-dev babel-polyfill复制代码

引用方式有三种：
1.为了引入@babel/polyfill。你需要在你应用的entry point的头部引入它 确保它在其他代码或者引用前被调用,CMD的引入方式写法如下:

require("@babel/polyfill")复制代码

2.如果是es6 的import 语法,要在入口点(如:main.js)的顶部引入polyfill,确保首先加载polyfill。

import "@babel/polyfill";复制代码

3.在webpack中集成polyfill
如果在.babelrc 中没有指定 useBuiltIns 的值或者设置useBuiltIns: false. 可以直接在webpack.config.js 的 entry array 中添加@babel/polyfill

module.exports = {
　　entry: ["@babel/polyfill", "./app/js"]
};复制代码

二、 在webpack中使用babel-loader

功能:

利用babel-loader等包实现es6转es5语法

安装

npm install babel-loader @babel/core @babel/preset-env webpack -D复制代码

{
    test:/\.js$/,
    loader: babel-loader?cacheDirectory=true
    exclude:/node_modules/
}复制代码

@babel/core的功能是对某些需要调用Babel的API进行转码
上面代码的意思是:遇到js文件先用babel-loader处理,cacheDirectory=true表示loader 将使用默认的缓存目录 node_modules/.cache/babel-loader，如果在任何根目录下都没有找到 node_modules 目录，将会降级回退到操作系统默认的临时文件目录,exclude表示排除node_module中的文件确保转译尽可能少的文件。
可是这样还不能发挥babel的作用,在项目的根目录下创建.babelrc文件,配置如下:

{
"preset":["@babel/preset-env"]
}复制代码

另外一种写法,使用options属性来给loader传递选项：:

  {
    test: /\.js$/,
    include:/node_modules/librasons,// path.resolve(__dirname, 'node_modules/librasons'),
    use: {
      loader:"babel-loader",
      options: {
        presets: ['@babel/preset-env']
      }
    }
  }复制代码