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的文件，在里面写

 

{
    "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：作为一个模块，可以根据需要，引入其他模块的提供的属性或者方法，供自己模块使用。

默认导入导出  

import aMoudule from "./a.js"

export default {
    name,
    say
}

　　

普通导入导出

import { name as myname } from "./a.js"//as作用重新赋名

//2、普通导出
export {
    name,
    say
}

　　

整体导出：

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