模块化相关规范

模块化概述

传统开发模式的主要问题

1、命名冲突
2、文件依赖

解决问题

模块化就是把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块。
模块化开发的好处:方便代码的重用,从而提升开发效率,并且方便后期的维护。

浏览器端模块化规范

AMD

require.js(https://requirejs.org/)

CMD

sea.js(http://seajs.github.io/seajs/docs/)

服务器端模块化规范

CommonJS

1、模块化分为单文件模块
2、模块成员导出:module.exportsexports
3、模块成员导入:require('模块标识符')

ES6模块化规范

1、每个 js 文件都是一个独立的模块
2、导入模块成员使用import关键字
3、暴露模块成员使用export关键字

node.js 中通过 babel 体验 ES6模块化

1、安装需要的库

1
2
3
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

npm install --save @babel/polyfill

2、项目根目录创建文件 babel.config.js
3、babel.config.js 的文件内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const presets = [
    ["@babel/env", {
    targets:{
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1"
    }
    }]
];
module.exports = {presets};

4、执行代码

1
npx babel-node index.js

ES6模块化的基本语法

默认导出和默认导入

1、默认导出语法export default默认导出的成员

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
let a = 10
let c = 20

let d = 30

function show() {}

// 每个文件只能使用一次 export default
export default {
    a,
    c,
    show
}

2、默认导入语法import 接收名称 from '模块标识符'

1
2
3
import m1 from './src/m1'

console.log(m1)
按需导出与按需导入

1、按需导出语法 export let s1 = 10

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
let a = 10
let c = 20

let d = 30

function show() {}

export default {
    a,
    c,
    show
}

export let s1 = 1
export let s2 = 2

2、按需导入语法 import {s1} from '模块标识符'

1
2
3
4
import m1,{s1, s2} from './src/m1'
console.log(m1)
console.log(s1)
console.log(s2)
直接导入并执行模块代码
1
2
3
for (let i = 0; i < 3; i++) {
    console.log(i)
}
1
import './src/m2'

webpack 用法

webpack 概述

文档地址

webpack 的基本使用

创建 demo 项目

1、新建项目空白目录,并运行npm init -y命令,初始化包管理配置文件package.json
2、新建src源代码目录
3、新建src -> index.html首页 4、初始化首页基本的结构
5、运行npm install jquery -S命令,安装jQuery
6、通过模块化的形式,实现列表隔行变色效果

在项目中安装和配置 webpack

1、运行 npm install webpack webpack-cli -D安装 webpack 相关的包
2、在项目根目录创建名为webpack.config.js的 webpack 配置文件
3、在 webpack 的配置文件中,初始如下基本配置

1
2
3
module.exports = {
    mode: 'development'
}

4、在 package.json 配置文件中的 scripts 节点下,新增 dev 脚本如下:

1
2
3
"scripts": {
    "dev": "webpack"
},

5、在终端中运行npm run dev命令,启动 webpack 进行项目打包

配置打包的入口和出口

webpack 的4.x 版本中默认约定
1、打包的入口文件为 src -> index.js
2、打包的输出文件为 dist -> main.js

修改 webpack 打包的入口与出口,需要在 webpack.config.js 中新增如下配置信息:

1
2
3
4
5
6
7
8
const path = require('path')
module.exports = {
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    }
}

配置 webpack 的自动打包功能

1、安装自动打包工具

1
npm install webpack-dev-server -D

2、修改 package.json -> scripts 中的 dev 命令如下

1
2
3
"scripts": {
    "dev": "webpack-dev-server"
  }

3、将src -> index.html中 script 脚本的引用路径,改为 ‘/bundle.js’
4、运行npm run dev重新打包
5、浏览器里访问http://localhost:8080查看效果

配置 html-webpack-plugin 生成预览页

1、安装

1
npm install html-webpack-plugin -D

2、修改 webpack.config.js 文件头部区域,添加如下信息

1
2
3
4
5
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
    template: './src/index.html', // 指定要用到的模板文件
    filename: 'index.html' // 指定生成的文件名
})

3、修改 webpack.config.js 文件中向外暴露的配置对象,新增如下配置节点

1
2
3
module.exports = {
    plugins: [htmlPlugin]
}

配置自动打包相关的参数

1
2
3
4
5
6
7
// package.json 中的配置
// --open 打包完成后自动打开浏览器页面
// --host 配置 IP 地址
// --port 配置端口
"scripts": {
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8080
},

webpack中的加载器

打包处理css文件

1、安装

1
npm i style-loader css-loader -D

2、在 webpack.config.js 中的 module -> rules 数组中添加如下规则

1
2
3
4
5
module: {
    rules: [
        {test: /\.css$/, use:['style-loader', 'css-loader']} // use 的顺序是固定的
    ]
}