ES6模块前端工程化

前端工程化

• 学习目录
  • 模块化相关规范
  • webpack用法
  • Vue 单文件组件
  • Vue 脚手架
  • Element-UI 的基本使用

模块化相关规范

• 模块化概述
  • 传统开发模式的主要问题
    • 命名冲突
    • 文件依赖
  • 通过模块化解决上述问题
    • 模块化就是把单独的一个功能封装到一个模块(文件)中
    • 模块之间相互隔离
    • 但是可以通过特定的接口公开内部成员，也可以依赖别的模块
  • 模块化开发的好处
    • 方便代码的重用
    • 从而提升开发效率
    • 并且方便后期的维护
  • 浏览器端模块化规范
    • AMD
      • Require.js
    • CMD
      • Sea.js
  • 服务器端模块化规范
    • CommonJS
      • 模块化分为单文件模块与包
      • 模块成员导出：module.exports和exports
      • 模块成员导入：require('模块标识符')
  • ES6模块化 —— 大一统的模块化规范
    • 在ES6模块化规范诞生之前，Javascript社区已经尝试并提出了AMD CMD Commonjs等模块化规范
    • AMD和CMD适用于浏览器端的Javascript模块化
    • CommonJS适用于服务器端的Javascript模块化
    • ES6语法规范中，在语言层面上定义了ES6模块化规范
    • ES6模块化规范是浏览器端与服务器端通用的模块化开发规范
  • ES6模块化规范中定义
    • 每个js文件都是一个独立的模块
    • 导入模块成员使用import关键字
    • 暴露模块成员使用export关键字

ES6模块化

• ES6模块化的babel安装配置
  • Node.js中通过babel体验ES6模块化
    • babel语法转换工具：将高级JS代码转换为低级JS代码
    • babel配置安装
      • npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
      • npm install --save @babel/polyfill
      • 项目根目录创建文件babel.config.js
      • babel.config.js文件内容如下代码
      • 通过npx babel-node index.js执行代码

// babel.config.js
const presets = [
    ["@babel/env", {
        targets: {
            edge: "17",
            firefox: "60",
            chrome: "67",
            safari: "11.1"
        }
    }]
];
module.exports = {presets};

• ES6模块化的基本语法 - 默认导出与默认导入
  • 默认导出与默认导入
    • 默认导出语法export default默认导出的成员
      • 每个模块中，只允许使用唯一的一次export default，否则会报错！
    • 默认导入语法import接受名称from'模块标识符'
    • 代码执行 npx babel-node index.js

// 当前文件模块为m1.js

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

// index.js
// 导入模块成员
import m1 from './m1.js';

console.log(m1);
// 打印结果为：
// { a: 10, c: 20，[function: show] }

// 数据调用
console.log(m1.a);

• ES6模块化的基本语法 - 按需导出与按需导入
  • 按需导出语法 export let s1 = 10
  • 按需导入语法 import { s1 } from '模块标识符'

// 当前文件模块为m1.js

// 向外按需导出变量s1
export let s1 = 'harmony';
// 向外按需导出变量s2
export let s2 = 'android';

// 向外按需导出方法 say
export function say() {
    console.log('ios system');
}

// 默认导出与按需导出
import m1, {s1, s2 as ss2, say} from './m1.js';
console.log(m1.a);
console.log(s1);
console.log(ss2);
say();

• ES6模块化的基本语法 - 直接导入并执行模块代码
  • 只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员
  • 此时可以直接导入并执行模块代码
  • import './m3.js'

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

import m1, {s1, s2 as ss2, say} from './m1.js';
console.log(m1.a);
console.log(s1);
console.log(ss2);
say();
import './m3.js';