前端学习第十八天——ES6之Module模块

前端学习第十八天——ES6之Module模块

Module

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

• 模块系统需要解决的主要问题
  1. 模块化的问题
  2. 消除全局变量
  3. 管理加载顺序

引入模块

    <script src="./index.js" type="module"></script>

一个文件就是一个模块
只要会用到import或export，在使用script标签加载的时候，就要加上 type="module"

Module的导入和导出

• export default 和对应的 import
  导出的东西可以被导入（import），并访问到。
  如果一个模块没有导出，也可以将其导入。
  被导入的代码都会执行一遍，也仅会执行一遍。

    const age = 18;
    export default age;

    import age from './module.js';
    console.log(age);

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

• export 和对应的 import
export后面接返回的声明或语句

    export const age = 18;

    const age = 18;
    export { age }

    // 不能随意修改引入的变量名
    import { age } from './module.js';

不能导入匿名的函数或类

1. 导入导出多个

    export { fn, className, age };

    import { fn, age, className } from './module.js';

2. 导出导入时起别名

    export { fn as func, className, age };

    import { func, age, className as Person } from './module.js';

3. 整体导入
   会导入所有输出，包括通过 export default 导出的

    // 导入全部
    import * as obj from './module.js';

4. 同时导入

一定是export default的在前

    import age2, { func, age, className } from './module.js';

注意事项

1. 模块顶层的 this 指向
   模块中，顶层的 this 指向 undefined
2. import 和 import()
import命令具有提升效果，会提升到整个模块的头部，率先执行。
   import()可以按条件导入
3. 导入导出的复合写法
   复合写法导出的，无法在当前模块中使用

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

Babel

官网：https://babeljs.io/
在线编译：https://babeljs.io/repl
Babel 是 JavaScript 的编译器，用来将 ES6 的代码，转换成 ES6 之前的代码

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

Babel的使用方式

配置npm淘宝镜像源

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

• 安装Babel
  安装最新版本

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

安装指定版本

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

• Babel配置和执行

打开package.json文件。在scripts中添加"build":"babel src -d dist"

    "scripts": {
        "build":"babel src -d dist"
    }

接下来执行npm run build。然而并没有任何变化。因为我们没有Babel的配置文件
执行下面的命令，安装@babel/preset-env

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

在项目根目录中创建.babelrc配置文件。
在文件中添加配置内容。

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

重新执行npm run build命令。会在目标文件夹下生成目标代码。

webpack

webpack 是静态模块打包器，当使用 webpack 处理应用程序时，会将所有这些模块打包成一个或多个文件。
模块：webpack 可以处理 js/css/图片、图标字体等
静态：开发过程中存在于本地的 js/css/图片/图标字体等文件，就是静态的。动态的内容，webpack没办法处理，只能处理静态的

• 安装Webpack

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

• 配置Webpack
  在根目录下创建webpack.config.js文件。

    const path = require('path');

    module.exports = {
        // 指定打包模式为开发模式
        mode:'development',
        entry:'./src/index.js',
        output:{
            path:path.resolve(__dirname, 'dist'),
            filename:'bundle.js'
        }
    };

在package.json文件中配置命令

    "scripts": {
    "webpack":"webpack --config webpack.config.js"
  }

entry和output

entry入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

单入口

    entry: './src/index.js',

多入口

    entry: {
      main: './src/index.js',
      search: './src/search.js'
    },

output选项可以控制 webpack 如何向硬盘写入编译文件。

单入口

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }

多入口

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    }

loader

webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

安装babel-loader

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

配置loader

在 webpack 的配置中 loader 有两个属性：
1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
2. use 属性，表示进行转换时，应该使用哪个 loader。

    module.exports = {
        module: {
            rules: [
            { test: /\.css$/, use: 'css-loader' },
            { test: /\.ts$/, use: 'ts-loader' }
            ]
        }
    };

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    }

引入 core-js，编译新增 API

    npm install --save-dev core-js@3.6.5

在要编译的文件中，引入core-js

    import "core-js/stable";

plugin

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
https://www.webpackjs.com/plugins/

安装html-webpack-plugin

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

配置 html-webpack-plugin 插件

引入

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

单入口

    new HtmlWebpackPlugin({
      template: './index.html'
    })

多入口

    new HtmlWebpackPlugin({
      template: './index.html',
      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']
    })

处理CSS文件

1. 安装

    npm install --save-dev css-loader@4.1.1
    npm install --save-dev style-loader@1.2.1
    npm install -- save-dev mini-css-extract-plugin@0.9.0

style-loader将CSS文件以style标签的方式引入
mini-css-extract-plugin将CSS文件以link方式引入
2. 配置

    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    module: {
        rules: [
            {
                test: /\.css$/,
                // use: ['style-loader', 'css-loader']
                // 从右向左使用loader
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'index.html'
        }),
            new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        })
    ]

处理CSS中的图片

1. 安装

    npm install --save-dev file-loader@6.0.0

file-loader，复制一份到打包路径，同时修改文件和引用路径。但引入的图片路径会出现问题。原因是MiniCssExtractPlugin和file-loader有一些冲突。
修改办法如下，在MiniCssExtractPlugin的配置中添加publicPath公共路径…/。
2. 配置

    module: {
    rules: [
        {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          },
          'css-loader'
        ]
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'img/[name].[ext]'
          }
        }
      }
    ]
  }

在file-loader中配置参数name: 'img/[name].[ext]'可以将文件放到指定的文件下。

处理HTML中的图片

1. 安装

    npm install --save-dev html-withind-loader@0.1.16

2. 配置

在file-loader中配置参数esModule: false。可以解决打包完的图片路径变为模块{"default":"img/1.png"}

module: {
    rules: [
        {
            test: /\.(jpg|png|gif)$/,
            use: {
            loader: 'file-loader',
            options: {
                name: 'img/[name].[ext]',
                esModule: false
            }
            }
        },
        {
            test: /\.(htm|html)$/,
            loader: 'html-withimg-loader'
        }
        ]
    },

url-loader

1. 安装

    npm install --save-dev url-loader@4.1.0

2. 配置
   limit:3000限制小于3kb的图片转为base64格式，大于3kb还是用file-loader进行操作。

    module: {
        rules: [
        {
            test: /\.(jpg|png|gif)$/,
            use: {
            loader: 'url-loader',
            options: {
                name: 'img/[name].[ext]',
                esModule: false,
                limit: 3000
            }
            }
        }
        ]
    },

url-loader只能处理CSS和Js里面的图片，不能处理HTML里面的图片。
url-laoder不能替代file-loader

使用webpack-dev-server搭建开发环境

1. 安装

2. 配置
   在package.json文件中配置。

    "scripts": {
    "dev": "webpack-dev-server --open chrome"
  },

ng|gif)$/,
use: {
loader: ‘url-loader’,
options: {
name: ‘img/[name].[ext]’,
esModule: false,
limit: 3000
}
}
}
]
},

url-loader只能处理CSS和Js里面的图片，不能处理HTML里面的图片。
url-laoder不能替代file-loader

### 使用webpack-dev-server搭建开发环境
1. 安装

2. 配置
在package.json文件中配置。

```Jaon
    "scripts": {
    "dev": "webpack-dev-server --open chrome"
  },

在命令行中，运行npm run dev，将会进行打包项目，同时打开谷歌浏览器。在我们修改代码时，保存也会进行动态的更新。打包生成的dist目录会存在内存中，不会存在磁盘中。