1.CommonJS模块化开发
(1)创建工具类
//工具类
const sum = function(a,b){
return a+b;
}
const sub = function(a,b){
return a-b;
}
const mul = function(a,b){
return a*b;
}
const di = function(a,b){
return a/b;
}
// 导出给别人使用
module.exports = {
sum,
sub,
mul,
di
}
(2)导入调用
//require导入包,来使用我们导入的包
const m = require('./四则运算.js');
//要导出的才可以使用
console.log(m.sum(1,2));
console.log(m.sub(1,2));
console.log(m.mul(1,2));
console.log(m.di(1,2));
(3)输出结果
2.ES6模块化开发
(1)创建工具类
export function getList(){
//在真实业务中,异步获取数据
console.log("获取用户数据列表");
}
export function save(){
console.log("保存数据");
}
(2)导入调用
import { getList,save } from "./userApi";
getList()
save()
//默认不支持es6语法。
(3)输出结果
(4)我们可以看见,输出不了结果,这是因为默认不支持ES6语法,import无法识别。这时候我们就需要Babel来降低版本运行。
第一步就是项目初始化 npm init -y
(5)第二步,创建 .babelrc文件,写入转码类型
{
"presets":["es2015"],
"plugins": []
}
(6)第三步,安装解码器,不安装我们是无法打包的。
npm install --save-dev babel-preset-es2015
(7)第四步,将我们的代码部分放入src目录,然后在package.json中写入代码"build":“babel src -d dist” 记得前面加逗号
(8)第五步,执行输出文件命令npm run build
执行之后dict目录之下会生成userApi.js与userTest.js的ES5类型文件。转码的两个文件,游览器可以直接运行,
(9)第六步,执行 node .\dist\userTest.js 看是否能够输出
3.ES6模块化开发2
小伙伴们是不是觉得很麻烦呢,这里我们有一种新玩法:
(1)改写userApi.js里面的代码。
//前端开发中更多的是这种写法
export default{
getList(){
console.log("获取用户数据列表");
},
save(){
console.log("保存数据");
}
}
(2)改写userTest.js里面的代码。
import user from "./userApi";
user.getList()
user.save()
//默认不支持es6语法。
(3)重新编译再执行
我们可以看见,这和编译出来的代码和之前的是不一样的,但是本质是一样的。