Babel 7的使用和说明

最新推荐文章于 2024-08-09 18:45:07 发布

lvxinaidou

最新推荐文章于 2024-08-09 18:45:07 发布

阅读量602

点赞数 2

分类专栏： JavaScript webpack babel

本文链接：https://blog.csdn.net/lvxinaidou/article/details/102740647

版权

JavaScript 同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

webpack

3 篇文章 0 订阅

订阅专栏

babel

1 篇文章 0 订阅

订阅专栏

前端代码兼容Chrome 44,Babel 7的使用和说明

问题

目前公司多数测试同感云平台的浏览器一般是Chorme 77，现遇到特殊情况，必须要在Chorme 44上运行平台，因为浏览器版本低，会报错：

网上大致查看了一下错误原因，是es6语法出错，可能因为Chorme 44版本太低，不支持es6的语法。奇怪的一点，之前已经用过babel-loader模块转换过代码，但还存在一兼容问题，会不会是有些语法需要单独的插件转换。还是说babel-loader的版本过低，有些功能不支持了。

既然这样那就先试试，如何用webpack 4.x实现es6的转换，当然网上也找到了类似的Chorme 44不兼容问题，也可以按步骤操作看看效果，在操作之前写单独对babel-loader知识认识一下。

轻松搞定webpack4的babel6

babel-loader

babel-loader用来处理ES6+并将其编译为ES5,也同时与Webpack同工作的模块它使我们能够在工程中使用最新的语言特性（甚至提案中），同时不必特别关注这些特性在不同平台的兼容问题。

babel-core

Babel编译器的核心模块。

babel-preset-env

它是Babel官方推荐的预置器，可根据用户设置的目标环境自动添加所需要的插件和补丁来编译ES6+代码。

新建文件夹es6-babel,npm init 初始化得到package.json文件。

npm init
安装babel-loader babel-core babel-preset-env ,当然后续要用到webpack , 也要安装webpack,webpack-cli（需要升级）

npm install babel-loader babel-core babe-preset-env
npm install webpack webpack/cli
npm i wepback-cli@3.1.1 -D

安装以上三个所需要的包，默认情况下是最新的版本，这里在最后转换时会有问题，版本会不匹配。建议：

babel-loader和babel-core版本不对应所产生的，

babel-loader 8.x对应babel-core 7.x
babel-loader 7.x对应babel-core 6.x

文件目录

实例代码

新建src/index.html

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
        <title>同感云平台</title>
    </head>
    <body></body>
    <script src="../dist/bundle.js"></script>
</html>

新建src/index.js

let div = require('./helloworld');
document.body.appendChild(div());

JavaScript

新建src/helloworld.js ,该文件使用了es6的let ,const,箭头函数。

// 输出模块
let add = () => {
    // 这里使用了箭头函数，还有let和const关键字哦～～
    let content = "Hello ";
    const NAME = "ES6";
    var div = document.createElement('div');
    div.innerHTML = content + NAME;
    return div;
};
module.exports = add;

查看package.json 文件

{
  "name": "es6-babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "webpack": "^4.5.0"
  },
  "devDependencies": {
    "webpack-cli": "^3.1.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack ./src/index.js --mode-development"
  },
  "author": "",
  "license": "ISC"
}

配置webpack.config.js的内容

// Node.js的一个路径模块，用于操作文件路径
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'), // 注意这里是'dist'而不是'/dist'，不然会报错，Error: EACCES: permission denied, mkdir '/dist'
        filename: "bundle.js"
    },
    module: {
        rules: [{ // 这里用rules而不是loaders
            test: /\.js$/, // 匹配所有js文件
            exclude: /node_modules/, // 排除掉node_modules这个文件夹的js文件
            loader: 'babel-loader', // 加载babel工具包
            options: { // 这里用options而不是query，虽然可以兼容，但是还是按照规则来吧
                presets: ['env'] // 使用es6工具包
            }
        }]
    }
};

最后我们来运行一下代码

查看打包后的代码dist/bundle.js,已经将ES6语法转为ES5语法了。

同时界面上也达到了输出效果

babel 7的具体使用

@babel/cli

@babel/cli是babel提供的内建的命令行工具，主要是提供babel这个命令来对js文件进行编译

我们在安装了@babel/cli之后，使用@babel/cli编译

新建项目es6-babel7

npm init
npm install --save-dev @babel/cli

@babel/core

@babel/cli是依赖一个叫@babel/core的包文件的，没有这个包文件是绝对不能执行任何编译操作的（因为执行编译的transform方法在这个包里）

npm install --save-dev @babel/core

安装到这里，如果你用过 babel 6，可能要问，怎么不是 npm install --save-dev babel-cli？@ 符号又是什么？这是 babel 7 的一大调整，原来的 babel-xx 包统一迁移到babel 域下 - 域由 @ 符号来标识，一来便于区别官方与非官方的包，二来避免可能的包命名冲突。

文件目录

此时在文件index.js文件中写入如下代码

let a = 1;
const pi = 3.14;
let fun = () => console.log('hello babel');
class Robot {
    constructor(msg) {
        this.message = msg
    }
    say() {
        alertMe(this.message)
    }
}
const marvin = new Robot('hello babel')
marvin.say();

.babelrc文件中不写入任何配置和插件

{
    "presets":[],
    "plugins": []

}

执行npx babel index.js编译结果都是该文件无任何变化，这个问题的发生来自 babel 6 。Babel 6 做了大量模块化的工作，将原来集成一体的各种编译功能分离出去，独立成插件。这意味着，默认情况下，当下版本的 babel 不会编译代码。

@babel/plugin-transform-block-scoping

@babel/plugin-transform-arrow-functions

@babel/plugin-transform-classes

这说明要使用各种真正的编译功能是需要配合各种插件的,这里简单使用三种:

要将箭头函数编译成普通函数需要使用@babel/plugin-transform-arrow-functions，

要将const或者let变量编译成var变量需要@babel/plugin-transform-block-scoping，

要将class关键字转化成传统基于原型的类需要@babel/plugin-transform-classes，

所以为了真正的编译我们是可能需要大量各种的插件的，具体插件有哪些请点这里

npm install --save-dev @babel/plugin-transform-block-scoping
npm install --save-dev @babel/plugin-transform-arrow-functions
npm install --save-dev @babel/plugin-transform-classes

先单独看一下每个插件的效果：

如果我的代码中大量使用插件，那我依然避免不了在配置文件中大量填写插件信息的工作，但是伟大的babel为了让程序员们有更多的时间放在编写上，它提供了一个叫做preset的概念，说好听点叫预设，直白点就是插件包的意思，意味着babel会预先替我们做好了一系列的插件包，如下4个常用的插件包