ES6模块化

一、简介

因为嵌入网页的JavaScript代码越来越庞大，越来越复杂，理想情况下开发者主需要实现核心的业务逻辑
模块化的出现是为了解决全局变量污染和依赖关系混乱的问题。
依赖关系混乱：在开发过程中，通常需要根据需求将代码分为多个js文件进行编写，因为这些文件存在依赖关系，所以很容易搞不清楚哪个文件需要先引入。由于nodejs的需要，由于当时还没有官方的模块化标准，所以nodejs选择了由社区讨论出d一套模块化标准——commonjs模块化标准。commonjs的出现打开了前端开发者的思路，尝试将commonjs运作在浏览器上，可是在里面存在诸多困难。于是，前端开发者们也讨论出了一份适用于浏览器的模块化方案——AMD规范。在AMD的基础上又产生了CMD规范。最后ECMA官方推出了ES6模块化规范。

二、CommonJs规范

案例示范

1. 初始化项目，因为默认不支持ES6的import语法

npm init -y

然后使用Babel降级解码:
(1)配置==.babelrc==文件，

{
	"presets":["es2015"],
	"plugins":[]
}

（2）安装解码器

npm install -g babel-cli
npm install --save-dev babel-preset-es2015

(3）babel自定义脚本，再根目录创建dist文件夹，并在package.json中添加"build":"babel src --d dist"

{
  "name": "es6module",
  "version": "1.0.0",
  "description": "",
  "main": "compute.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"babel src --d dist"
  },
  "author": "Pning",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1"
  }
}

2. 写好代码导出
   创建一个文件夹作为项目存放位置，并且在里面新建一个src/compute.js文件，内容为：

//单个写法
export function getList(){
    console.log("获取异步请求数据");
}

export function crud(){
    console.log("请求crud数据");
}

//实际开发写法
export default{
    demo_1(){
        console.log("demo_1");
    },
    demo_2(){
        console.log("demo_2");
    },
    demo_3(){
        console.log("demo_3");
    },
    demo_4(){
        console.log("demo_4");
    }
}

2. 导入使用
   新建一个src/use.js

//单个导入
import {getList,crud} from "./compute.js"
getList();
crud();

//实际开发导入
import user from "./compute.js"
user.demo_1();
user.demo_2();
user.demo_3();
user.demo_4();

3. 命令行执行

npm run build
node .\dist\use.js