目录
babel 文件1.js --out-file 文件2.js
1、ES6模块化规范（node不支持ES6的模块化，必须先转码再运行）
CommonJS输出的是值的拷贝/复制（深拷贝），ES6输出的是值的引用（浅拷贝）
CommonJS模块是运行时加载，ES6模块是编译时输出接口
环境安装
1、安装转码工具babel：ES6代码转换为ES5代码（因为有浏览器不支持ES6）
集成终端中打开，且确保当前执行环境为cmd（清屏命令为cls）
cnpm install -g babel-cli
2、安装转换规则
cnpm install -g babel-preset-latest
3、写转换规则文件
.babelrc
4、试着运行.js文件
babel 文件名.js
5、如果报错
cnpm install --save-dev babel-cli babel-preset-latest
6、再运行.js文件
转码常用命令
1、将ES6代码的文件1进行转码并输出到文件2（文件2自动生成）
babel 文件1.js --out-file 文件2.js
2、将ES6代码的文件夹1进行转码并输出到文件2夹（文件夹2自动生成）
babel 文件夹1 --out-dir 文件夹2
包管理机制
npm是国外版，cnpm是中国版，yarn是npm的加强版
1、npm（node package manager）：前端模块化的标志性产物 npm -v：查看版本 npm help：寻求帮助，查看其它命令 npm list：陈列所有下载过的工具 npm init ：初始化项目 npm install：安装依赖 npm install --save-dev：局部安装产品 npm uninstall：卸载依赖 npm run serve：运行程序 |
2、cnpm：中国版本的npm，将npm安装到了npmjs.org镜像 cnpm是cpm的拷贝，支持所有npm的命令 npm install -g cnpm --registry=https://registry.npm.taobao.org：安装cnpm |
3、yarn：经过重新设计的npm客户端，使用本地缓存，不需要联网就可以安装本地缓存的依赖项 npm install -g yarn：安装yarn yarn -v：查看yarn的版本 yarn init：初始化项目 |
模块化机制
1、ES6模块化规范（node不支持ES6的模块化，必须先转码再运行）
module.js
// 导出模块 let firstName='terry'; let lastName='larry'; // 类表导出,ES6导出的是一个接口，编译时加载代码 export{firstName,lastName} // 重命名导出 export{firstName as first,lastName as last} // 导出单个属性（基本数据类型） export let a=1; // 导出单个属性（函数） export function test(){ console.log('导出单个属性（函数）的执行'); } |
module2.js
// 导入module.js的模块 import{ firstName,lastName,first,last,a,test } from "./module"; // 重命名导入 import {first as f,last as l} from './module'; console.log(firstName,lastName,'类表导出'); console.log(first,last,'重命名导出'); console.log(f,l,'重命名导入'); console.log(a,'导出单个属性（基本数据类型）'); test(); |
|
默认导出和导入，一个模块只能有一个默认导出
module2.js // 1-默认导入,*代表模块中的所有东西都放到obj中 import * as obj from './module'; console.log(obj,'1-默认导入'); |
|
module.js // 默认导出（导出的是一个对象） export default{ name:'liqian', age:22 } module2.js // 2-默认导入 import person from './module'; console.log(person,'2-默认导入'); |
|
module.js // 默认导出函数（无函数名） export default function() { console.log('默认导出函数（无函数名）的执行'); } module2.js // 2-默认导入 import person from './module'; console.log(person,'2-默认导入'); //默认函数的执行 person(); |
|
module.js // 默认导出函数（有函数名） export default function test(){ console.log('默认导出函数（有函数名）的执行'); } module2.js // 2-默认导入 import person from './module'; console.log(person,'2-默认导入'); //默认函数的执行 person(); |
|
2、CommonJS模块化规范
 |
module3.js console.log(module,'模块化对象');
|
module4.js console.log(exports===module.exports); |
|
module3.js // CommonJS模块化导出 let firstName='李'; let lastName='千'; module.exports.firstName=firstName; module.exports.lastName=lastName; module4.js // CommonJS模块化导入，运行时加载 let {firstName,lastName}=require('./module3'); console.log(firstName+""+lastName); |
|
module3.js // CommonJS模块化导出 let firstName='李'; let lastName='千'; module.exports={ firstName, lastName } module4.js // CommonJS模块化导入，运行时加载 let {firstName,lastName}=require('./module3'); console.log(firstName+""+lastName); |
|
3、区别
CommonJS输出的是值的拷贝/复制（深拷贝），ES6输出的是值的引用（浅拷贝）
module5.js let firstName='李'; let lastName='千'; setTimeout(()=>{ firstName='马' //修改不改变 },2000) module.exports={ firstName, lastName } module6.js let {firstName,lastName}=require('./module5'); console.log(firstName+""+lastName); setTimeout(()=>{ console.log(firstName+""+lastName,'CommonJS输出的是值的拷贝、复制（深拷贝）'); },4000); |
|
module7.js let firstName='李'; let lastName='千'; setTimeout(()=>{ firstName='马' //修改会改变 },2000) export{ firstName, lastName } module8.js import { firstName,lastName } from "./module7"; console.log(firstName+""+lastName); setTimeout(()=>{ console.log(firstName+""+lastName,'ES6输出的是值的引用（浅拷贝）'); },4000); |
|
