1、大一统的模块化规范–ES6模块化
ES6模块化规范中定义:
- 每个js文件都是一个独立的模块
- 导入模块成员使用import关键字
- 暴露模块成员使用export关键字
2、node.js中通过babel体验es6模块化
安装babel模块
npm install babel
项目根目录创建babel.config.js
在babel.config.js文件中添加如下代码
const presets=[ [ "@babel/env",{ targets:{ edge:'17', firefox:'60', chrome:'67', safari:'11.1' } } ] ]; moudle.exports={presets}
3、默认导出与默认导入
默认导出
export default 默认导出的成员
默认导入
import 接受名称 from ‘模块标识符’
m1.js
let a=10;
let c=20;
let d=20;
function show () {
console.log('---------------')
}
export default {
a,c,show
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
hello default
<script type="module">
import m1 from './js/m1.js';
console.log(m1)
</script>
</body>
</html>
4、按需导出与按需导入
按需导出 export let s1 =10
按需导入 import { s1 } from ‘模块标识符’
m1.js
export let e=110;
export let f=200;
export function say () {
console.log('hello wolrd')
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
hello default
<script type="module">
import { e,f as ff,say}from './js/m1.js';
console.log(e)
console.log(ff)
console.log(say)
</script>
</body>
</html>
5、直接导入并执行模块化代码
有时候,只想单纯执行某个模块中的代码,并不需要得到模块中向外暴露的成员,此时,可以直接导入并执行模块代码
m1.js
for(let i=0; i<3; i++){
console.log(i)
}
default.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
hello default
<script type="module">
import './js/m1.js';
</script>
</body>
</html>
6、webpack及配置
前端项目构建工具(打包工具),可以解决当前web开发中锁面临的困境。
- npm install webpack webpack-cli -d 安装相应的包
- 根目录下创建webpack.config.js的webpack配置文件
- 在webpack的配置文件中,初始化如下基本配置
module.exports = { mode:'development'; //mode用开发模式来指定构建模式 }
- package.json的配置文件中的scripts节点下,新增dev脚本如下:
“script”:{ “dev”:“webpack” //script节点下的脚本,可以通过npm run执行 }
- 在终端运行npm run dev命令,启动webpack进行项目打包。
默认约定
打包的入口文件为 src/index.js
导包的输出文件为dist/main.js
webpack.config.js
module.exports = {
mode:'development', //mode用开发模式来指定构建模式
entry: path.join(__dirname,'./src/index.js'),
output: {
path:path.join(__dirname,'./dist'),
filename: 'bundle.js'
}
}
7、webpack自动打包
npm install webpack-dev-server -d 安装自动打包工具