ES6（环境安装、转码命令、包管理机制、模块化机制）

目录

环境安装

转码常用命令

babel 文件1.js --out-file 文件2.js

babel 文件夹1 --out-dir 文件夹2

包管理机制

npm是国外版，cnpm是中国版，yarn是npm的加强版

模块化机制

1、ES6模块化规范（node不支持ES6的模块化，必须先转码再运行）

2、CommonJS模块化规范

3、区别

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);

CommonJS模块是运行时加载，ES6模块是编译时输出接口