webpack之react开发前准备

Posted 2020-09-03 雨和雪

今天抽出空来,翻了翻webpack之react的书籍,看到刚出的es6语法,貌似是简单了不少,但是兼容性确实不容乐观,如果实在要用那也不是不可以的,首先就跟随我来看下这个插件吧:

Babel:这个插件是一种多用途的javascript编译器,他能把最新的js编译成当下浏览器可以执行的版本,所以这就让我们使用es6语法成为了可能.实现安装Babel CLI,这是一个可以在命令行中使用Babel编译的方法.

npm install babel -cli -g

该命令是告诉命令行来全局安装babel cli插件的,接下来就可以轻松快乐的编译ES6代码了:

//es6.js
let numbers = [1,2,3];
let doubleNumbers = numbers.map((number)=>number*2);
console.log(doubleNumbers);

然后我们可以使用命令去编译该段js代码

babel es6.js -o compiled.js

代开compiled.js你会发现代码并未有任何的改变,只是单纯的拷贝复制了,那是因为我们还没有配置babel,那么接下来我们就一同来配置一下babel,首先创建一个.babelre的配置文件,如下:

//.babelrc
{
    "presets":[].
    "plugins":[]
}

接下来安装一个预设,就可以完美的把es6语法转为es5语法了

npm install babel-preset-es2015 --save-dev

然后我们修改对应的配置文件

//.babelrc
{
    "presets":[‘es2015‘],
    "plugins":[]
}

现在终于配置完成了,你会发现再次运行以上命令es6代码被成功编译了.

"use strict";

var number = [1, 2, 3];
var doubleNumber = number.map(function (number) {
  return number * 2;
});

还有在即将发布的ES7中的展开操作符"..."(以下简称...),在这里要用一个单独的插件来实现此功能,具体步骤如下:

npm install babel-plugin-transform-object-rest-spread --save-dev

 

 插件安装完成后,我们来用...写一段代码:

let mike = {name: ‘mike‘,age:40};
mike = {...mike,sex:‘male‘};
console.log(mike);

 还运行刚才的-o命令,编译后的文件为:

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var mike = { name: ‘mike‘, age: 40 };
mike = _extends({}, mike, { sex: ‘male‘ });
console.log(mike);

可以看出这个插件添加了一个_extends方法来完成这个功能.

所以对于ES6来说,绝对多数浏览器还是不支持的 但是随着babel插件的诞生,在现代项目中,可以尽情的使用ES6了.