day2--ES6入门

1.开发模式（原生）

​ xxx文件夹

​ js文件

​ html文件

​ css文件

​ image文件

技术：html5 css3 JavaScript

2.vue开发

• 利用脚手架 vue-cli创建框架

  在xxx文件夹下，进入终端输入命令： vue create @vue-cli

• 但是由于是框架，浏览器只能展示html css JavaScript文件 因此最终还是需要将vue项目进行打包成原生的项目文件

  在项目终端输入 npm run build

• 以上操作将项目打包成一个static文件夹，static文件就是我们将项目部署到服务器上的一个文件

9.babel

将es6代码转化为es5，仅仅只是代码的转化。以防浏览器兼容性问题

实例：

let arr=[1,2,3]
arr.forEach(()=>{
})
//转化为
var arr=[1,2,3]
arr.forEach(function(){
})

• ​ 安装

$ npm install --global babel-cli

• ​ 安装预设

$ npm install --save-dev babel-preset-es2015

• 在项目文件夹下添加配置文件配置 .babelrc 文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bL0cNdJd-1632825505594)(image-20210926190041119.png)]

给文件添加以下代码

{ 
“presets”: [ "es2015"]
}

• ​ 使用

$ babel xxx.js

• ​ 将转码结果写入一个文件，–out-file 或 -o 参数指定输出文件

$ babel xxx.js --out-file new_xxx.js

• ​ 整个目录转码 --out-dir 或-d 参数指定输出目录

$ babel src --out-dir lib

10.模块化(commonjs) nodejs 采用的commonjs标准

10.1 ES6模块化

1.导出模块

export命令
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系，也就是说外部接口需要用这个接口名来引用。

var firstName = 'Michael'; 
var lastName = 'vicky'; 
export { firstName, lastName }; //列表导出
export { firstName as first, lastName as last}; //重命名导出
export var a = 3;	//导出单个属性
export function multiply(x, y) { return x * y; }; //导出单个属性
//默认导出，一个模块只能有一个默认导出，不能使用 var、let 或 const 用于导出默认值 export default。
export default {}
export default function 	foo(){}
var a = 1;
export a;	//报错，因为没有提供对外的接口。应该export var a = 1; 或者export {a}

2. 导出模块

• import命令

// ES6模块 
import { stat, exists, readFile } from 'fs'; 

es6模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入，上面的代码实质上是从fs模块加载3个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。

静态的import 语句用于导入由另一个模块导出的绑定

import * as person from './person.js'	//导入整个模块内容
import {firstName,lastName} from './person.js'	//导入多个接口
import {firstName as name} from './person.js'	//重命名
import '/modules/my-module.js';			//运行整个模块而不导入任何值
import myDefault from './my-module.js';		// 导入使用export default导出的模块

浏览器中使⽤ES6模块

浏览器加载ES6模块，在script标签加上teyp=“module”,表示异步加载，不会造成堵塞浏览器，即等页面加载完毕，再执行模块脚本，等同于打开了

 <script type="module"> 
 import utils from "axios"; 
 // other code 
 script>

同时还需要在package.json中加入"type":“module”

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HLm3ADVc-1632825505597)(image-20210928091356898.png)]

10.2 CommonJS模块化

​ CommonJS 和 AMD 模块，都只能在运行时确定模块之间的依赖关系，以及输入输出的变量。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

// CommonJS模块  
let { stat, exists, readfile } = require('fs');
 // 等同于
let _fs = require('fs'); 
let stat = _fs.stat;
let exists = _fs.exists; 
let readfile = _fs.readfile; 

上面代码的实质是整体加载fs模块（即加载fs的所有方法），生成一个对象（_fs），然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。

• 模块化对象

node内部提供一个Module构建函数，所有模块都是Module的实例。每个模块内部，都有一个module对象，代表当前模块

module

​ id 唯一标识

​ filename 路径+文件名

​ path 路径

​ exports 对外暴露的接口

console.log(module);

// Module {
//     id: '.', //模块的识别符，通常是带有绝对路径的模块文件名
//     path: 'D:\\七、ES6\\day2',  //路径
//     exports: {},		//表示模块对外输出的值
//     parent: null,	//返回一个对象，表示调用该模块的模块
//     filename: 'D:\\七、ES6\\day2\\1-app01.js',  //模块的文件名，带有绝对路径
//     loaded: false,	//返回一个布尔值，表示模块是否已经完成加载
//     children: [],	//返回一个数组，表示该模块要用到的其他模块
//     paths: [
//       'D:\\七、ES6\\day2\\node_modules',
//       'D:\\七、ES6\\node_modules',
//       'D:\\node_modules',
//     ]
//   }

1. 导出模块

• export命令

  在这里同样使用export命令

  为了方便，Node为每个模块提供一个exports变量，指向module.exports。这等同在每个模块头部，有一行这样的命令

  ​ var exports = module.exports;

​ 一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系，也就是说外部接口需要用这个接口名来引用。

实例：在app01.js中导出模块

//app01.js
let obj={
    name:'terry',
    age:15,
    sayHello(){
        console.log('hello');
    }
};
let a=123;
module.exports.obj=obj
module.exports={
	obj,
	a
}	
console.log('this is app01');

2. 导入模块

• require函数

​ nodejs提供的内置函数，用于加载指定路径的模块或者是指定名称的模块进行返回

​ 参数是模块路径/模块名称，模块名称根据paths去找对应得模块，首先会在当前目录得node_modules中去找，如果找不到，依次往上找，直到找到为止，找不见则报错

接上个实例，在app02.js中导入app01.js的模块：

//app02.js	
// 导入模块
let obj= require('./app01')
console.log(obj);
//this is app01
//{
//  obj: { 
//		name: 'terry',
//		age: 15, 
//		sayHello: [Function:sayHello]
//		},
// 	a: 123
//}

注意: 模块化差异

1.CommonJS模块输出的是一个值的拷贝，es6模块输出的是值得引用

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

ES6 模块加载的不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。ES6 模块输出的是值的引用。

CommonJS 模块加载的是一个对象，即module.exports属性，该对象只有在脚本运行完才能生成。CommonJS 模块输出的是值的拷贝

11.npm (node package manager)

​ 1.将一个文件变成模块，在文件中执行

​ npm init 或者 npm init -y

​ 2.随之会在当前文件下生成package.json的文件，这个文件就是当前模块的核心配置文件

name  	模块名称		
version 	模块版本
description 	描述信息	
main		指定模块入口文件
type	 	当type值为module的时候，支持es模块化
scripts	脚本，使用' npm run  脚本名'可以调用
dependencies		依赖关系		
devDependencies 	环境依赖或测试依赖

3.常见命令

​ npm install xxx 会在当前目录下新建一个node_modules文件夹，将第三方模块放进去

​ npm install xxx --save 产品依赖

​ npm install xxx --save-dev 开发依赖

​ npm install xxx -g 全局安装

​ 例如：npm install qs -g 下载qs第三方库到node_module文件夹下

​ npm update xxx 更新依赖模块

​ npm uninstall xxx 删除依赖模块

​ 自己写的第三方模块需要放到node_modules中

12.cnpm

​ 安装：npm install -g cnpm --registry=https://registry.npm.taobao.org

常见命令与npm相同

13.yarn

​ 安装：npm install -g yarn/cnpm install -g yarn

常见命令与npm相同