babel&webpack
课程目标
解决问题es6以上版本浏览器不支持问题?
babel
认识babel
- 1.认识 Babel
官网:https://babeljs.io/
在线编译:https://babeljs.io/repl
Babel 是 JavaScript 的编译器,用来将 ES6 的代码,转换成 ES6 之前的代码
使用babel 对 es6代码进行编译,但是ES6新增的对象Babel不能编译。
使用babel
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);
解释编译结果
abel 本身可以编译 ES6 的大部分语法,比如 let、const、箭头函数、类
但是对于 ES6 新增的 API,比如 Set、Map、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign/Array.from)都不能直接编译,需要借助其它的模块
Babel 一般需要配合 Webpack 来编译模块语法
babel 准备工作
1.什么是 Node.js 和 npm
Node.js 是个平台或者工具,对应浏览器
后端的 JavaScript = ECMAScript + IO + File + ...
操作
// npm:node 包管理工具
// npm install
// 2.安装 Node.js
// node -v
// npm -v
// 3.初始化项目
// npm init -> package.json
// 4.安装 Babel 需要的包
// npm install --save-dev @babel/core @babel/cli
// npm install --save-dev @babel/core@7.11.0 @babel/cli@7.10.5
babel编译es6代码
// https://babeljs.io/setup
// 1.执行编译的命令
// 在 package.json 文件中添加执行 babel 的命令
// babel src -d dist
// babel src --out-dir dist
// 语法: babel 被编译的文件名 --out-dir 编译后的文件名
// npm run build
// 2.Babel 的配置文件
// .babelrc
// npm install @babel/preset-env@7.11.0 --save-dev
// 创建配置文件 .babelrc,并配置
// {
// "presets": ["@babel/preset-env"]
// }
总结
bable编译器
- Babel 本身可以编译 ES6 的大部分语法
- ES6 Module 语法一般需要使用 Webpack 来处理
- Babel 本身不能编译 ES6 新增的 API,需要借助其它的模块
Babel 的使用方式
- 学会查询 Babel 官网的 Setup 页面(https://babeljs.io/setup)
- 一般在命令行工具( CLI )或 Webpack 中使用 Babel
使用 Babel 的流程
-
安装 Node.js(https://nodejs.org/en/) 、
- 初始化项目,生成 package.json 文件
C:Babel>npm init
- 初始化项目,生成 package.json 文件
-
安装 Babel 需要的包(@babel/core、@babel/cli 和 @babel/preset-env)
npm i @babel/core、@babel/cli @babel/preset-env --save-dev
-
在 package.json 文件添加执行编译的命令
{ "script": "babel src -d dist" }
-
创建配置文件
.babelrc
,并配置
{
"presets": ["@babel/preset-env"]
}
- 编译并测试
npm run build