前端工程化基础

前端工程化

模块化概述：

1. 命名冲突 2. 文件依赖

通过模块化解决上述问题

1. 模块化 就是把单独的一个功能封装到一个模块（文件中），模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块

模块化相关规范

1. 浏览器端模块规范

​ AMD

require.js(http://www.requirejs.cn/)

​ CMD

Sea.js(http://seajs.qithub.io/seajs/docs/)

2. 服务器端模块化规范

​ CommonJS

1. 模块分为单文件模块 与 包
2. 模块成员导出： module.exports 和 exports
3. 模块成员导入： require('模块标识符')

3.ES6模块化

​ Es6 模块化规范： 是浏览器端与服务器端通用的模块化开发规范

每个 js 文件 都是一个独立的模块
导入模块成员使用 import 关键字

暴露模块成员使用 export 关键字

node.js 中通过babel 体验Es6 模块化

1. npm install --save-dev @babel/core @babel/cil @babel/presen-env @babel/node
2. npm install --save @babel/polyfill
3. 项目根目录中创建 babel.config.js 文件
4. babel.config.js 文件内容如右侧代码

const presets = [
['@babel/env',{
targets:{
edge：’17‘，
firefox:'60',
chrome:'67',
safari:'11.1'
}
}]
]
module.exports = {presets } //暴露出去

5. 通过 npx babel-node index.js 执行

默认导出 与 默认导入：

1. 默认导出语法 export default 默认导出成员

// 当前文件模块 ml.js
//定义私有成员 a 和 c
let a = 10
let c = 20
//外界访问不到变量 d因为它没有被暴露出去
let d = 30 
function show() {}
//将本模块中的私有成员暴露出去,供其他模块使用
export default {
a，
c,
show
}

2. 默认导入语法 import 接收名称 from ‘模块标识符’

// 导入模块成员
import m1 from  './m1.js'
console.log(m1)
//打印输出的结果为“
{a:10 , c：20，show:[Function:show]}

注意： 每个模块只能使用一次 export default 暴露

按需导出

1. 按需导出语法 export let s1 =10

// 当前文件模块为 m1.js
//向外按需导出变量 s1
export let s1 = 'aaa'
//向外按需导出变量 s2
export let s2 = ’ccc‘
// 按需导出方法 say 
export function say = function() {}

2. 按需导入 语法 import {s1} from “模块标识符”

import {s1,s2} from ’./m1.js'

直接导入

当前模块为 ma.js
// 再当前模块执行一个for 循环操作
for(let i =0;i<3;i++){
console.log(i)
}

//直接导入并执行模块代码
import './m2.js'