1.前端模块化
1.1 commonJS模块化
规范:
导出:
module.exports={
firstName
}
导入:
let {} =require('xxx.js')
1.2 ES6模块化
规范:
导出:
列表导出 export {变量}
重命名导出 export {变量名 as 新变量名}
导出单个属性 export let a=1;
export function get(){};
默认导出 一个模块只允许有一个默认导出
export default {
变量
}
export default function(){
}
导入:
1.列表导入
import {变量名} from 'xxx.js'
2.重命名导入
import {变量名 as 新变量名} from 'xxx.js'
3.导入单个属性
import a from 'xxx.js'
4.导入默认导出内容
import 变量名 from 'xxx.js';
5.导入export和默认导出的内容
import * as obj from 'xxx.js'
由于一些浏览器对于高版本的ES语法并不完全支持,因此则会用到转码工具将高版本的代码转化为低版本的代码。
2.转码工具的使用(babel)
安装
2.1 初始化项目
npm init
npm init -y(直接执行)
2.2 安装转码工具
cnpm install -g babel-cli
cnpm install --save -dev babel-cli babel-preset-latest(安装工具和规则)
2.3 安装转换规则(上面的第二段代码已经执行过)
cnpm install -g babel-preset-latest
2.4 指定转换规则 新建.babelrc 在.babelrc文件中输入以下代码
{
"presets":["latest"]
}
使用
将某个es6文件的代码转化为es5代码:babel xxx.js -------在控制台输出结果
将一个es6文件的代码转化为es5代码并保存到另一个文件中:babel 1-xxx.js --out-file 2-xxx.js
将整个文件夹中的文件全部转化为es5代码并输出到另一个文件夹:babel xxx --out-dir xxx2
3.变量关键字
var 变量提升 重复声明 不具有局部作用域
let 不会变量提升 不可以重复声明 具有局部作用域
const 不会变量提升 不可以重复声明 具有局部作用域,声明得变量声明得时候需要赋值
包管理工具的差别
npm
国外包管理工具 服务器部署在外网 githup
cnpm
国内包管理工具 服务器部署淘宝镜像 mirror gitee
yarn
npm cnpm 重新下载依赖 重新下载工具库
yarn 先去缓存中查找依赖或者工具库 找不到再去下载