CommonJs模块化
一、简介
因为嵌入网页的JavaScript代码越来越庞大,越来越复杂,理想情况下开发者主需要实现核心的业务逻辑
模块化的出现是为了解决全局变量污染和依赖关系混乱的问题。
依赖关系混乱:在开发过程中,通常需要根据需求将代码分为多个js文件进行编写,因为这些文件存在依赖关系,所以很容易搞不清楚哪个文件需要先引入。由于nodejs的需要,由于当时还没有官方的模块化标准,所以nodejs选择了由社区讨论出d一套模块化标准——commonjs模块化标准。commonjs的出现打开了前端开发者的思路,尝试将commonjs运作在浏览器上,可是在里面存在诸多困难。于是,前端开发者们也讨论出了一份适用于浏览器的模块化方案——AMD规范。在AMD的基础上又产生了CMD规范。最后ECMA官方推出了ES6模块化规范。
二、CommonJs规范
案例示范
- 初始化项目,因为默认不支持ES6的import语法
npm init -y
然后使用Babel降级解码:
(1)配置==.babelrc==文件,
{
"presets":["es2015"],
"plugins":[]
}
(2)安装解码器
npm install -g babel-cli
npm install --save-dev babel-preset-es2015
(3)babel自定义脚本,再根目录创建dist文件夹,并在package.json
中添加"build":"babel src --d dist"
{
"name": "es6module",
"version": "1.0.0",
"description": "",
"main": "compute.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"babel src --d dist"
},
"author": "Pning",
"license": "ISC",
"devDependencies": {
"babel-preset-es2015": "^6.24.1"
}
}
- 写好代码导出
创建一个文件夹作为项目存放位置,并且在里面新建一个src/compute.js
文件,内容为:
//单个写法
export function getList(){
console.log("获取异步请求数据");
}
export function crud(){
console.log("请求crud数据");
}
//实际开发写法
export default{
demo_1(){
console.log("demo_1");
},
demo_2(){
console.log("demo_2");
},
demo_3(){
console.log("demo_3");
},
demo_4(){
console.log("demo_4");
}
}
- 导入使用
新建一个src/use.js
//单个导入
import {getList,crud} from "./compute.js"
getList();
crud();
//实际开发导入
import user from "./compute.js"
user.demo_1();
user.demo_2();
user.demo_3();
user.demo_4();
- 命令行执行
npm run build
node .\dist\use.js