4.Module模块与Babel编译

一、Module模块

1.Module是什么

模块系统

（1）模块

一个个的局部作用域的代码块

（2）模块系统

模块系统需要解决的主要问题：

        模块化的问题

        消除全局变量

        管理加载顺序

---

 2.Module的基本用法

只要用到import或export，在使用script标签加载的时候，就要加上type='module'。

---

 3.export default和对应的import

（1）export default导出和对应的import导入

a.导出的东西可以被导入（import），并访问到。

b.一个模块没有导出，也可以将其导入，被导入的代码都会执行一遍，也仅会执行一遍。

c.一个模块只能有一个export default。

（2）export导出对应的import导入

基本用法：

import aaa from './module.js';//对应export default age；
//这里（aaa）可以随意命名。

import {age} from './module.js';对应export const age=18
//这里（age）不能随意命名

多个导出以及导入导出时起别名：

const age=18;
// export default age;

function fn(){}

class Name{}

//fn as func,给fn起别名
export {fn as func,Name,age};



import {func,Name as person,age} from './module.js'

整体导入：

import * as obj from './module.js'

同时导入:

const age=18;
// export default age;

function fn(){}

class Name{}

//fn as func,给fn起别名
export {fn as func,Name,age};
export default 18;

//一定是export default 的在前面
import age2,{func,age,Name} from './Module.js';

---

 4.module的注意事项

（1）模块顶层的this指向

模块中顶层的this指向undefined

（2）import关键字和import()函数

        import命令具有提升效果，会提升到整个模块的顶部，率先执行；import执行的时候，代码还没执行，故不能把import放到代码块中导入；import和export命令只能在模块的顶层，不能在代码块中执行。

        import()可以按条件导入：

if(px){
    import('px.js');
}else if(mobile){
    import('mobile.js')
}

（3）导入导出的复合写法

export {age} from './module.js'

//等价于
import {age} from './module.js';
export {age} from './module.js'

---

二、Babel与webpack

1.Babel是什么

Babel是JavaScript的编译器，用来将ES6的代码转换成ES6之前的代码。

        Babel本身可以编译ES6的大部分语法，比如let、const 、箭头函数、类，但是对于ES6新增的API，比如Set、Map、Promise等全局对象，以及一些定义在全局对象上的方法都不能直接编译，需要借助其他的模块。

Babel一般需要配合Webpack来编译模块语法

官网：https://babeljs.io/

2.使用Babel前的准备工作

（1）什么是node.js和npm：

Node.js 是个平台或者工具，对应浏览器。

npm:node的包管理工具。

（2）初始化项目：

npm init ->package.json

（3）安装Babel需要的包:

npm config set registry https://registry.npm.taobao.org

npm install --save-dev @babel/core @babel/cli

3.Webpack是什么

webpack是静态模块打包器，当webpack处理应用程序时，会将所有这些模块打包成一个或多个文件。

webpack可以处理js/css/图片、图标字体等单位，webpack没办法处理动态的内容。

4.Webpack初体验

（1）安装webpack需要的包

npm install --save-dev webpack-cli@3.3.12 webpack@4.44.1

（2）配置webpack

根目录路下创建webpack.config.js文件，配置如下：

const path=require('path');

module.exports={
    mode:"development",
    //开发模式，代码不会被压缩在一起。
    entry:'./src/index.js',
    //入口文件，指定从哪个文件开始打包
    output:{
        path:path.resolve(__dirname,'dist'),
        //出口文件：打包到dist文件下，文件名叫bundle.js
        filename:'bundle.js'
    }
}

运行webpack的命令，可以修改指定命令文件。

5.entry和output

entry：入口文件，把你指定的文件转换到dist文件下，名字为bundle.js。

单入口文件和多入口文件的配置在webpack.config.js下：

// entry: './src/index.js',单入口文件

//多入口文件
entry:{
    main:'./src/index.js',
    search:'./src/search.js',
  },

output：出口文件

//单入口文件对应的出口文件配置
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }

//多入口文件对应的出口文件配置
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  }

6.loader

（1）loader让webpack能够处理那些非JS文件的模块。

（2）在 webpack 的配置中 loader 有两个目标：

        a.test属性，用于标识出应该倍对应的loader进行转换的某个或某些文件。

        b.use属性，表示进行转换时，应该使用哪个loader。

（3）babel-loader:是连接webpack和babel，把ES6编译成兼容性代码，让babel能够在webpack中使用：

安装：

npm install --save-dev babel-loader@8.1.0 

（4）安装babel并创建babel配置文件（根目录下：.babelrc）:

npm install --save-dev @babel/core@7.11.0 @babel/preset-env@7.11.0

{
    "preset":["@babel/preset-env"]
}

（5）引入core-js：

编译新增API：

npm install --save-dev core-js@3.6.5
//指定版本

在需要打包的js文件下引入：

import 'core-js/stable';

7.plugins(插件)

（1）loader 被用于帮助webpack转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。

（2）html-webpack-plugin:把打包过后的js问价自动嵌入到html文件中。

npm install --save-dev html-webpack-plugin@4.3.0

（3）配置html-webpack-plugin插件：

const path = require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');

module.exports = {
  plugins:[
    //多入口
    new HtmlWebpackPlugin({
      template:'./index.html',
      //把打包好的js文件放入此模板文件中
      filename:"index.html",
      chunks:['index'],
      minify:{
        //删除index.html中的注释
        removeComments:true,
        //删除index.html中的空格
        collapseWhitespace:true,
        //删除各种html标签属性值的双引号
        removeAttributeQuotes:true
      }
    }),
    new HtmlWebpackPlugin({
      template:'./search.html',
      filename:'search.html',
      chunks:['search']

    })
  ]
};

8.处理CSS文件

（1）配置安装：

npm install --save-dev style-loader@1.2.1


//配置：在webpack.config.js文件下
modules:{
    rules:[
        {
            test:/\.css$/,
            //多个loader的配置
            use:['style-loader','css-loader']
            //单个loader
            loader:'css-loader'
        }
    ]
}