前端模块化的相关规范
1. 传统开发模式的主要问题
-
命名冲突:多个JS文件之间如果存在重名的变量则会存在变量的覆盖问题
-
文件依赖:JS文件之间无法实现相互的引用
2. 通过模块化解决上面的问题
-
模块化就是把单独的一个功能封装到一个文件中
-
模块之间相互隔离，可以通过指定的接口公布内部成员，依赖别的模块
3. 浏览器端模块化规范的尝试
- 浏览器端模块化规范(已经不用了)
-
AMD Require.js
-
CMD Sea.js
- 服务器端模块化规范
- CommonJs(nodeJS还在用这种规范)
-
模块分为单文件模块与包
-
导出:module.exports 和 exports
-
导入:require('模块标志符')
-
大一统的ES6模块化规范
-
值得说明的是，无论是前端模块化规范还是后端的，用的语言都是javascript，ES6支持了模块化的写法 ES6学习
-
ES6模块诞生之前，Javascript社区已经尝试和提出了上面三种模块化规范。不过他们存在着一定的差异性、局限性、并不是通用的，今后统一使用ES6规范就好了
-
ES6模块化的定义
-
每个JS都是一个独立的模块
-
导入模块使用import关键字
-
暴露模块使用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基础入门
-
Babel提供babel-cli工具，用于命令行转码。
-
babel-node命令可以直接运行ES6代码。cli里附带安装，不单独
-
如果某些代码需要调用Babel的API进行转码，就要使用babel-core模块。可以用来转码操作
-
举例来说，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。
-
根据你支持的环境自动决定适合你的Babel语法转换插件
-
npm install --save @babel/polyfill
-
项目根目录创建文件 babel.config.js
-
npx babel-node index.js
- 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加载，文件包括:
CSSLESS
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.配置文件解析
- package.json
脚手架配置学习1.jpg
脚手架配置学习2.jpg
- main.js
脚手架配置学习3.jpg
网友评论