Babel与webpack
一。基础认知1
babel是js编译器,将新版本js代码转换成大多数浏览器支持的es5,es3代码
浏览器其实也不认识require函数,bable配合webpack解决模块的问题;
主要编译的是语法,es6新增api并不编译,因为本身就没有怎么转,不像箭头函数是语法可以换个语法形式,babel本身默认转不了,所以要借助模块(模块里实现了这个promise对象,实现了api),然后引进来,老版本浏览器也就有这个功能了,
模块语法指的是import export之类的;
<script>
// 1.认识 Babel
// 官网:https://babeljs.io/
// 在线编译:https://babeljs.io/repl
// Babel 是 JavaScript 的编译器,用来将 ES6 的代码,转换成 ES6 之前的代码
// 2.使用 Babel
// ES6
let name = 'Alex';
const age = 18;
const add = (x, y) => x + y;
// Set Map
new Promise((resolve, reject) => {
resolve('成功');
}).then(value => {
console.log(value);
});
Array.from([1, 2]);
class Person {
constructor(name, age) {
Object.assign(this, { name, age });
}
}
new Person('Alex', 18);
import './index.js';
// 使用 Babel 编译后
('use strict');
require('./index.js');
function _instanceof(left, right) {
if (
right != null &&
typeof Symbol !== 'undefined' &&
right[Symbol.hasInstance]
) {
return !!right[Symbol.hasInstance](left);
} else {
return left instanceof right;
}
}
function _classCallCheck(instance, Constructor) {
if (!_instanceof(instance, Constructor)) {
throw new TypeError('Cannot call a class as a function');
}
}
var name = 'Alex';
var age = 18;
var add = function add(x, y) {
return x + y;
};
new Promise(function (resolve, reject) {
resolve('成功');
}).then(function (value) {
console.log(value);
});
Array.from([1, 2]);
var Person = function Person(name, age) {
_classCallCheck(this, Person);
Object.assign(this, {
name: name,
age: age
});
};
new Person('Alex', 18);
// 3.解释编译结果
// Babel 本身可以编译 ES6 的大部分语法,比如 let、const、箭头函数、类
// 但是对于 ES6 新增的 API,比如 Set、Map、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign/Array.from)都不能直接编译,需要借助其它的模块
// Babel 一般需要配合 Webpack 来编译模块语法
</script>
二。babel的使用方式
把这些代码输入到命令行工具即可;提前安装node;npm是和node配合使用的;
在node.js安装模块(包)(也可以叫插件)和在浏览器安装插件类似;利用npm可以安装包
npm有个网站;npm在node安装的时候已经绑定在一起了,不要要单独安装;
安装完node后,在项目目录下打开命令行工具,这样可以确保后面安装包安装到项目目录下,不需要切换目录;npm安装包之前要初始化项目
后面的一直回车即可;得到npm init的那个json文件;
我们把下面的babel包安装成开发依赖:注意两个包并没有跟版本号,默认是最新版本;
注意,安装特定版本可以防止包更新后,可能造成不适用了,所以我们指定一个稳定的版本号,这里用的是学习时课程对应的版本号,为了保持效果一致;
命令行中利用鼠标右键粘贴;
我们将第一个babel操作指导代码粘贴到命令行;执行完毕后我们看一下那个json文件;
如果安装的不是这个版本,直接再安装一次我们要的版本,覆盖即可;
再看看package.json的用法:
下面是安装完两个包后:
我们假如换了工作环境,这个包不需要拷过去,npm i等价于npm install
使用babel编译ES6代码:
项目初始化仅限于没有package.json时;
我们根据babel官网的指导继续:
把圈中代码放到package.json中,这一步叫执行编译的命令,在 package.json 文件中添加执行 babel 的命令
这个命令的意思:
我们在项目目录下创建src文件夹,创建到项目文件夹的根目录:
我们把需要编译的代码准备好:
实际开发中,不使用babel的那个在线编译,太麻烦,我们使用命令行自动编译,下面这句命令将会编译src里面的js文件,并且自动创建一个dist文件夹在src同级位置,里面也有个babel.js,这个文件就是编译后的js文件
我们发现并没有编译成功,因为还有let和const;
.babelrc就是babel的配置文件
首先我们安装一下这个包,注意这里学习,我们把版本安装成和babel/core一样的版本
安装好包后我们看到这个:这个包的作用就是告诉babel具体该怎么转换ES6的语法,因为babel本身并不知道该怎么做,前面失败的原因也就是没有这个包
安装好这个包我们再配置这个包,首先还是在项目的根目录中手动创建一个文件夹,命名为.babelrc
配置完成后,再执行build命令
三。webpack
1.基础认知
vue,react里面一些底层的配置用的也是webpack,但是vue,react只能提供的是基础配置,所以我们学习webpack,通过项目要求修改配置,定制合适的配置
webpack模块:可以处理的最小单位
从远程服务器获取到的,就叫动态的;
import不需要了就解决了兼容问题,因为import export关键字是ES6里面的,不是所有浏览器都兼容ES6语法;webpack在js文件中,看到import、require会顺着import,require后面的路径去找,然后打包,然后默认去除了import,export,require
babel将import转换成require
2.使用webpack
我们可以把自己开发的这个程序传到npm网站上,包名就是package.json的那个name名,不能和已有的webpack包名重复;
手动去改一下:然后再重新安装这两个webpack包
配置webpack作用:让webpack知道打包那些文件,放到哪,是否压缩代码,是否把ES6转换成ES5
配置文件其实也是一个模块,所以我们要把配置的东西导出去;webpack在node平台运行所以使用node模块的方式导出
我们在项目的根目录下创建webpack.config.js(默认名) 这个文件,使用node.js的模块系统导出里面的webpack配置,不用ES6的模块系统;
把圈中代码复制到配置文件中
require里面的参数path是node内置的模块;
entry的意思入口文件,从index.js那里进入
自己创建两个js文件,里面涉及ES6模块的import关键字和export关键字,我们看看通过webpack打包出去的代码是什么样的,看看还有没有import和export
下面我们编译并测试
在package.json中添加执行webpack的命令(命令就是使用webpack执行配置文件),寻找到配置文件,开始打包
先把原本json中的那个修改一下:
名字可以自定义,我们把test改成webpack,后面在控制台npm run 这个自定义的名字即可
最新文章
- C#中POST数据和接收的几种方式(抛砖引玉)
- DotNet中几种常用的加密算法
- Metasploit爆破tcpwrapped服务
- Redis 配置文件
- Idea安装及简单配置
- 传说中的WCF(1):这东西难学吗?
- NOIP2015-普及组复赛-第一题-金币
- Java中进制的转换函数
- ArcGis Python脚本——遍历输出面或折线要素的折点坐标
- docker开发实践
- 4.3《想成为黑客,不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)—链接到目录
- [grub2] grub2修改启动顺序
- ActiveMQ broker解析
- 2017 清北济南考前刷题Day 4 morning
- 2. 解题报告~买卖股票的最佳时机 II
- axis2 webservice jar包使用情况(转)
- final关键字的简单理解
- Docker学习(二): 镜像的使用与构建
- AWS系列-EC2实例选择镜像
- Jquery改变td内容为1的颜色