ES6模块化

ES6模块化

 

创造原因：现在的web系统越来越庞大、复杂，需要团队分工，多人协作，大型系统的javascript文件经常存在复杂的依赖关系，后期的维护成本会越来越高。

JavaScript模块化正式为了解决这一需求而诞生。

 

 环境配置：

目前浏览器不支持ES6模块化的语法，所以我们在node里进行测试。

通过babel解决这个问题

通过babel编译js代码

1. 创建一个文件夹以及目录结构

• src 文件夹： 里面放源代码就行

 

2. 在当前文件夹下执行npm init

可以通过cd 且目录，没事多点tab，可以自动补全路径

一路点回车就行。（项目的名字不能是中文）

 

3.安装babel的依赖

// 命令行执行的
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

 

4. 添加babel的配置

在项目根目录下创建babel.config.json的文件，在里面写

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

{     "presets": [         [             "@babel/env",             {                 "targets": {                     "edge": "17",                     "firefox": "60",                     "chrome": "67",                     "safari": "11.1"                 },                 "useBuiltIns": "usage"             }         ]     ] }

 

　　

5. 执行编译命令

在项目根目录下执行

npx babel  src --out-dir lib

 

6. 想运行哪个js的脚本就用node执行这个脚本就行了

node .\lib\b.js

 

导出Export

导出Export：作为一个模块，它可以选择性地给其他模块暴露（提供）自己的属性和方法，供其他模块使用。

导入Import

导入Import：作为一个模块，可以根据需要，引入其他模块的提供的属性或者方法，供自己模块使用。

默认导入导出  

1 2 3 4 5 6

import aMoudule from "./a.js"   export default {     name,     say }

　　

普通导入导出

1 2 3 4 5 6 7

import { name as myname } from "./a.js"//as作用重新赋名   //2、普通导出 export {     name,     say }

　　

整体导出：

1	import * as obj from "./a.js"