模块化
随着网站逐渐变成"互联网应用程序"，嵌入网页的Javascript代码越来越庞大，越来越复杂 Javascript模块化编程，已经成为一个迫切的需求 理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块
# 模块化规范
CommonJS模块化规范（基于ES6语法之前）
ES6模块化规范（使用ES6语法）
# ES6模块化规范
ES6使用 export 和 import 来导出、导入模块
# 导出模块
创建一个示例文件夹demo，在文件夹下创建src/A.js文件
export default {
methodA() {
console.log('A....')
},
methodB() {
console.log('B...')
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
- 其他导出方式
export function methodA(){
console.log('A....')
}
export function methodB(){
console.log('B...')
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 导入模块
创建文件src/B.js文件
import a from "./A"
a.methodA()
a.methodB()
1
2
3
2
3
直接运行报错，nodejs只能执行es5规范的js，因此需要进行转码
node B.js
import A from "./A"
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1031:15)
at Module._compile (node:internal/modules/cjs/loader:1065:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMai
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
其他导入方式
import {methodA,methodB} from "./A"
methodA()
methodB()
1
2
3
4
2
3
4
# 使用Babel转码
ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行
# 安装 cli
Babel提供babel-cli工具，用于命令行转码
npm install -g babel-cli
1
查看是否安装成功
- 注意：在vscode的终端中有安全限制，输入会报错，在其他终端可以尝试
babel --version
1
# 初始化项目 npm init -y
在之前文件夹下，src文件夹的父文件夹中，初始化项目，如
D:\note\GitHub\my-demos\demo-npm\02.模块化\demo> npm init -y
1
# 配置 .babelrc
Babel的配置文件是.babelrc，存放在项目的根目录下
该文件用来设置转码规则和插件，presets字段设定转码规则
{
"presets": [
"es2015"
],
"plugins": []
}
1
2
3
4
5
6
2
3
4
5
6
# 安装转码器
在demo目录下安装
D:\note\GitHub\my-demos\demo-npm\02.模块化\demo> npm install -D babel-preset-es2015
1
# 进行转码
转码后，生成dist文件夹
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
babel src -d dist
1
2
3
2
3
# 运行转码后文件
查看转码后文件
- A.js
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = {
methodA: function methodA() {
console.log('A....');
},
methodB: function methodB() {
console.log('B...');
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
- B.js
"use strict";
var _A = require("./A");
var _A2 = _interopRequireDefault(_A);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
_A2.default.methodA();
_A2.default.methodB();
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
- 在dist文件夹中运行B.js
D:\note\GitHub\my-demos\demo-npm\02.模块化\demo\dist> node B.js
A....
B...
1
2
3
2
3
Last Updated: 2022/01/16, 11:29:51