前端模块化 —— 如何从传统走向工程化

前端模块化的相关规范

1. 传统开发模式的主要问题

• 命名冲突:多个JS文件之间如果存在重名的变量则会存在变量的覆盖问题

• 文件依赖:JS文件之间无法实现相互的引用

2. 通过模块化解决上面的问题

• 模块化就是把单独的一个功能封装到一个文件中

• 模块之间相互隔离，可以通过指定的接口公布内部成员，依赖别的模块

3. 浏览器端模块化规范的尝试

1. 浏览器端模块化规范(已经不用了)

• AMD Require.js

• CMD Sea.js

2. 服务器端模块化规范

• CommonJs(nodeJS还在用这种规范)

1. 模块分为单文件模块与包

2. 导出:module.exports 和 exports

3. 导入:require('模块标志符')

4. 大一统的ES6模块化规范

• 值得说明的是，无论是前端模块化规范还是后端的，用的语言都是javascript，ES6支持了模块化的写法 ES6学习

• ES6模块诞生之前，Javascript社区已经尝试和提出了上面三种模块化规范。不过他们存在着一定的差异性、局限性、并不是通用的，今后统一使用ES6规范就好了

• ES6模块化的定义

  1. 每个JS都是一个独立的模块

  2. 导入模块使用import关键字

  3. 暴露模块使用export关键字

---

Node.js通过Babel体验ES6模块化

1. 为什么要用Babel

• Babel是语法转换工具，将高级的有兼容性的JS代码转换为低级的没有兼容性的JS代码。node.js默认支持CommonJS，对与ES6模块化规范支持的并不是很好，所以我们要使用用bebal这个第三方插件，更好的使用ES6的高级特性。

2. 安装babel

• npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node babel基础入门

1. Babel提供babel-cli工具，用于命令行转码。

2. babel-node命令可以直接运行ES6代码。cli里附带安装，不单独

3. 如果某些代码需要调用Babel的API进行转码，就要使用babel-core模块。可以用来转码操作

4. 举例来说，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。

5. 根据你支持的环境自动决定适合你的Babel语法转换插件

• npm install --save @babel/polyfill

• 项目根目录创建文件 babel.config.js

• npx babel-node index.js

1. npx 想要解决的主要问题，就是调用项目内部安装的模块。有了npx我们就不用再用babel-node的相对路径启动它了，直接用npx就可以找到并使用这个模块

• 这些代码应该理解后手打

模块的导入与导出

• 默认导入(import m from './m1.js')与导出 (export default {})

  默认导入导出只能使用一次,可以与按需导入导出同时使用

  如果被导入为空，返回一个空对象，不会报错

• 按需导出export let a = "aaa"与导入import {a} from './m1.js' 按需导出可以改名

• 导入导出的细节

  按需导入导出.jpg

webpack解决当前web开发中面临的困境

• 文件依赖关系错综复杂

• 静态资源请求效率低

• 模块化支持不友好

• 浏览器对高级 Javascript 特性兼容程度较低

---

1. 概述

• webpack 是一个流行的前端项目构建工具（打包工具）。webpack提供了友好的模块化支持，以及代码压缩混淆、处理JS兼容问题、性能优化等强大的功能

2. 基本使用

• 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json 新建 src 源代码目录 新建 src -> index.html 首页 初始化首页基本的结构 运行 npm install webpack webpack-cli –D 命令，安装 webpack 相关的包 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件

3. webpack.config.js的配置格式

import ...
module.exports = {
 mode: '',
 entry：  ,
 output:{
 path:
 filename:
 }
 module:{
 rules:[

 ]
 },
 plugins:[],
}

4. webpack loader与plugins

• webpack默认只能处理JS文件，如果要要把其他文件打包到JS文件里面去需要用loader加载，文件包括:
  CSS

  LESS

  SCSS

  PostCSS

  JavaScript (打包处理 JS 文件中的高级语法)

  Image/Font

  Vue

• webpack有很多的插件，可以拓展webpack的功能，一会在webpack_study里具体说明

---

5. Vue单文件组件

1. 传统组件的问题和解决方案

• 全局定义的组件必须保证组件的名称不重复

• 字符串模板缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \

• 不支持 CSS 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏

• 没有构建步骤限制，只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器（如：Babel）

针对传统组件的问题，Vue 提供了一个解决方案 —— 使用 Vue 单文件组件。

2. 基本语法

• <template></tmplate>

• <script></script>

• <style scoped></style>

3. webpack 中配置 vue 组件的加载器

• npm i vue-loader vue-template-compiler -D

• const VueLoaderPlugin = require('vue-loader/lib/plugin')

• { test: /.vue$/, loader: 'vue-loader' }

• new VueLoaderPlugin()

Vue脚手架

1.默认方式创建脚手架后的目录分析

Vue-Cli脚手架文件main.js、App.vue、index.html、index.js详解

2.配置文件解析

1. package.json

脚手架配置学习1.jpg 脚手架配置学习2.jpg

2. main.js

脚手架配置学习3.jpg