ES6的模块化
2023-06-10 本文已影响0人
小黄不头秃
一、模块化概述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/**
传统开发模式的主要问题
（1）命名冲突
（2）文件依赖
提出了模块化的概念
模块化就是吧单独的一个功能封装到一个模块（文件）中，
模块之间相互隔离，但是可以通过特定的接口公开内部成员
。也可以依赖别的模块
方便了代码的重用，提法开发效率，并且方便后期的维护
浏览器端模块化编程
（1）AMD
require.js(http://www.requirejs.cn)
（2）CMD
Sea.js(http://seajs.github.io/seajs/docs/)
服务器端模块化规范
（1）CommonJS
模块分为单文件模块和包
模块成员导出：module.exports和exports
成员导入：require()
大一统的模块化规范-ES6模块化
以上的标准还是存在一定的差异性和局限性，并不是浏览器和服务器通用模块化标准
在ES6模块化规范中，在语言层面上定义了ES6模块化规范，是浏览器和服务器通用的模块化开发规范
ES模块化规范的定义：
每个js文件都是一个独立的模块
导入模块化成员使用 import 关键字
暴露模块化成员使用 export 关键字
*/
</script>
</body>
</html>
二、ES6的模块化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/**
node.js 中通过 babel 体验ES6模块化
(1)npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
(2)npm install --save @babel/polyfill
(3)项目根目录创建文件 babel.config.js
(4)babel.config.js文件内容如下代码
const presets = [
["@babel/env",{
target:{
edge:"17",
firefox:"60",
chrome:"67",
safari:"11.1"
}
}]
];
module.exports = { presets };
(5)通过 npx babel-node .\index.js 执行代码
*/
</script>
</body>
</html>
