前端模块化

一.转码工具

babel: 将高版本代码转换为低版本代码
1.初始化项目
npm init
npm init -y
2.安装转码工具
cnpm install -g babel-cli
cnpm install --save -dev babel-cli babel-preset-latest
3.安装转换规则
cnpm install -g babel-preset-latest
4.指定转换规则
新建.babelrc

{
    "presets":["latest"]
}

5.将es6代码转换为es5代码
babel xxx.js
6.将当前文件转换为es5文件输出到另外一个文件
babel xxx.js --out-file xxx.js
7.将整个src目录下的es6文件转换成es5文件到dist目录
babel src --out-dir dist

二.包管理工具/机制

作用:下载依赖 下载第三方工具库 引入框架…
npm 国外包管理工具 服务器部署在外网 例如:githup gitee
cnpm 国内包管理工具 服务器部署淘宝镜像 例如:imrro
yarn npm和cnpm重新下载依赖 重新下载工具库,yarn先去缓存中查找依赖或者工具库找不到再去下载

三.模块化

前端模块化分为ES6模块化和commonJS模块
一.ES6模块化
导出:
1.列表导出

let a='hello'
let b='modules'
export {a,b}

2.重命名导出

let a='hello'
let b='modules'
export {a as one,b as two}

3.单个属性导出

export let a=1
export function b(){
	console.log('单个属性导出')
}

4.默认导出
一个模块只能有一个默认导出

let a='hello'
let b='modules'
export default {
	a,
	b
}
export default function(){
	console.log('默认导出')
}

导入
1.列表导入

import {a,b} from 'xxx.js'

2.重命名导入

import {one as c,two as d} from 'xxx.js'

3.单个属性导入

import {a,b} from 'xxx.js'
b()

4.默认导入

import * as obj from 'xxx.js'

二.commonJS模块化
导出

let a='hello'
let b='modules'
module.exports={
	a,
	b
}

导入

let {a,b} = require('xxx.js')

ES6模块化和commonJS模块化的区别
1.ES6在编译的时候加载模块,commonJS在运行的时候加载模块
2.ES6输出的是一个值的引用,commonJS输出的是一个值得复制/深拷贝
ES6模块化规范 值得引用
导出模块:

let a='hello'
let b='modules'
setTimeOut(()=>{
	b='es6'
},2000)
export {
	a,
	b
}

导入模块:

import {a,b} from 'xxx.js'
console.log(a,b)//hello modules
setTimeOut(()=>{
	console.log(a,b)//hello es6
},4000)

commonJS模块化规范 值得复制
导出模块:

let a='hello'
let b='modules'
setTimeOut(()=>{
	b='commonJS'
},2000)
module.exports={
	a,
	b
}

导入模块:

let {a,b} = require('xxx.js')
console.log(a,b)//hello commonJS
setTimeOut(()=>{
	console.log(a,b)//hello commonJS
},4000)