1.模块化的分类
A.浏览器端的模块化
1).AMD(Asynchronous Module Definition,异步模块定义)
代表产品为:Require.js
2).CMD(Common Module Definition,通用模块定义)
代表产品为:Sea.js
B.服务器端的模块化
服务器端的模块化规范是使用CommonJS规范:
1).使用require引入其他模块或者包
2).使用exports或者module.exports导出模块成员
3).一个文件就是一个模块,都拥有独立的作用域
C.ES6模块化
ES6模块化规范中定义:
1).每一个js文件都是独立的模块
2).导入模块成员使用import关键字
3).暴露模块成员使用export关键字
小结:推荐使用ES6模块化,因为AMD,CMD局限使用与浏览器端,
而CommonJS在服务器端使用,ES6模块化是浏览器端和服务器端通用的规范。
2.在NodeJS中安装babel
A.安装babel
打开终端,输入命令:
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
安装完毕之后,再次输入命令安装:
npm install --save @babel/polyfill
B.创建babel.config.js
在项目目录中创建babel.config.js
文件。
编辑js文件中的代码如下:
const presets = [
["@babel/env",{
targets:{
edge:"17",
firefox:"60",
chrome:"67",
safari:"11.1"
}
}]
]
//暴露
module.exports = {
presets }
C.创建index.js文件
在项目目录中创建index.js
文件作为入口文件
在index.js
中输入需要执行的js代码,例如:
console.log("ok");
D.使用npx执行文件
打开终端,输入命令:npx babel-node ./index.js
3.设置默认导入/导出
A.默认导出
export default {
成员A,
成员B,
.......
},如下:
let num = 100;
export default{
num
}
B.默认导入
import 接收名称 from “模块标识符”,如下:
import test from "./test.js"`
注意:
在一个模块中,只允许使用export default向外默认暴露一次成员,千万不要写多个export default。
如果在一个模块中没有向外暴露成员,其他模块引入该模块时将会得到一个空对象
4.设置按需导入/导出
A.按需导出
export let num = 998;
export let myName = "jack";
export function fn = function()
{
console.log("fn")
}
B.按需导入
import {
num,fn as printFn ,myName } from "./test.js"
//同时导入默认导出的成员以及按需导入的成员
import test,{
num,fn as printFn ,myName } from "./test.js"
注意:
一个模块中既可以按需导入也可以默认导入,一个模块中既可以按需导出也可以默认导出。
5.直接导入并执行代码
import "./test2.js";
6.webpack的概念
webpack是一个流行的前端项目构建工具,可以解决目前web开发的困境。
webpack提供了模块化支持,代码压缩混淆,解决js兼容问题,性能优化等特性,提高了开发效率和项目的可维护性
7.webpack的基本使用
A.创建项目目录并初始化
创建项目,并打开项目所在目录的终端,输入命令:npm init -y
B.创建首页及js文件
在项目目录中创建index.html页面,并初始化页面结构:在页面中摆放一个ul,ul里面放置几个li。在项目目录中创建js文件夹,并在文件夹中创建index.js文件
C.安装jQuery
打开项目目录终端,输入命令: npm install jquery -S
D.导入jQuery
打开index.js文件,编写代码导入jquery并实现功能:
import $ from "jquery";
$(function(){
$("li:odd").css("background","cyan");
$("li:odd").css("background","pink");
})
注意:此时