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 这个自定义的名字即可

会默认创建一个dist文件夹，然后里面有一个bundle.js代码是经过压缩混淆的；

默认不写mode属性是线上/生产的模式，我们手动指定development开发模式，这样就可以让其不压缩混淆；

指定完后把dist目录删掉，重新编译一下，也就是重新run一下，bunble.js就把index和module打包到了一起

我们来测试一下;1方法引入我们编译后的打包文件，在chrome和ie都能正常运行，如果使用2引入，ie浏览器会出问题；且这里我们没有使用babel就解决了模块的兼容性问题

webpack提供了基础操作，es6的部分高级语法，webpack打包后IE浏览器可能兼容不了，所以还是需要在项目中借助babel转化