ES6-babel&webpack

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

• 安装 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