webpack之react开发前准备

今天抽出空来,翻了翻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了.

转载于:https://www.cnblogs.com/dyx-wx/p/6526403.html

webpack之react开发前准备相关推荐

webpack搭建php服务器,webpack搭建react开发环境步骤详解
这次给大家带来webpack搭建react开发环境步骤详解,webpack搭建react开发环境的注意事项有哪些,下面就是实战案例,一起来看一下.mkdir react-redux && ...
Webpack搭建React开发环境
Webpack搭建React开发环境 1.React环境搭建实现React开发的三种方式: (1)使用CDN的方式 <script src="https://unpkg.com/re ...
从零搭建webpack的react开发/生产环境
一.初始化项目在命令行中敲入如下命令: mkdir Webpack-react && cd Webpack-react && npm init -y 然后你就可以在你 ...
从零开始搭建webpack+react开发环境
环境主要依赖版本 webpack@4.8.1 webpack-cli@2.1.3 webpack-dev-server@3.1.4 react@16.3.2 babel-core@6.26.3 bab ...
webpack入门+react环境配置
小结放在前:这篇文章主要是为下一篇的react提前铺好路,webpack是一个前端资源模块化管理和打包工具,说白了就是方便我们管理自己的常用的一些代码,比如你开发中用到sass以及jade同时用到es ...
react 引用本地js_从零配置webpack 4+react脚手架（二）
前言: 你可能也注意到了,html文件中的关于js的引用是我们手动写的,那假如我们改了输出路径或打包编译之后的文件名,那我们岂不是还要手动去修改html文件中的引用?我们怎么做到,像create-re ...
react 文件 md5_从零配置webpack 4+react脚手架（二）
前言: 你可能也注意到了,html文件中的关于js的引用是我们手动写的,那假如我们改了输出路径或打包编译之后的文件名,那我们岂不是还要手动去修改html文件中的引用?我们怎么做到,像create-re ...
webpack入门+react环境配置 1
小结放在前:这篇文章主要是为下一篇的react提前铺好路,webpack是一个前端资源模块化管理和打包工具,说白了就是方便我们管理自己的常用的一些代码,比如你开发中用到sass以及jade同时用到es ...
教你webpack、react和node.js环境配置（上篇）
很多人刚学习react的时候,往往因为繁琐的配置而头疼,这里我将手把手教大家怎么用webpack配置react和redux的环境,这篇教程包括前端react和后台node整个网站的环境配置,对node ...

webpack之react开发前准备

webpack之react开发前准备相关推荐

最新文章

热门文章