前言
本篇文章讲述前端工程化从模块化到如今的脚手架的发展，以及Webpack、Vue脚手架的详解！
一、模块化
模块化就是把单独的功能封装到模块（文件）中，模块之间相互隔离，但可以通过特定的接口公开内部成员，也可以依赖别的模块
传统开发问题存在命名冲突和文件依赖关系不明确
浏览器模块化方案
- AMD ==>require.js
- CMD ==>sea.js
服务器模块化方案
CommonJS
-
模块分为单文件模块与包
-
模块成员导出：module.exports 和 exports
-
模块成员导入：require
ES6模块化方案
浏览器和服务器通用的方案
-
每个 JS 文件都是一个独立的模块
-
导入模块成员使用 import 关键字
-
暴露模块成员使用 export 关键字
默认导出与导入
- export default{ }
- import xxx from 'xxx'
-
一个模块中 export default 只允许使用一次！
-
没有导出的话，import 会得到一个空对象
按需导出与导入
// 按需导出可以写多次
export function say() {console.log('say ~~~');
}// 默认导出只能写一次
// ...
export default {a,c,show
};import m1, {say} from './m1';直接导入模块会执行其中的代码
二、Webpack
前端项目构建工具（打包工具）
当前web开发面临的困境
-
文件依赖关系错中复杂
-
静态资源请求效率低
-
模块化支持不友好
-
浏览器对高级 JS 兼容程度低
-
etc...
基本使用
- 初始化包管理配置文件 npm init
- 新建src源文件目录
- 新建src/index.html首页
- 初始化首页基本结构
配置Webpack
- 安装webpack相关的包 npm i webpack webpack-cli-D
- 项目根目录创建webpack.config.js配置文件
- 在配置文件中，初始化基本配置
- package.json中配置scripts
- 使用npm run dev 打包项目
入口和出口
-
默认入口为 src/index.js
-
默认出口为 dist/main.js
const path = require('path');module.exports = {entry: path.join(__dirname, './src/index.js'),output: {path: path.join(__dirname, './dist'),filename: 'bundle.js'},mode: 'development'
};自动打包功能
- 安装
npm i webpack-dev-server -D- 修改package.json中的script
{"scripts": {"dev": "webpack-dev-server"}
}- 将index.html中的JS路径修改为/bundle.js
- 访问本地路径
配置devServer
module.exports = {devServer: {open: true,host: '127.0.0.1',port: 8888}
};生成预览页面
- 安装
npm i html-webpack-plugin -D- 配置webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');const htmlPlugin = new HtmlWebpackPlugin({template: './src/index.html', // 指定用到的模板文件filename: 'index.html' // 在内存中生成文件的名称
});- 删除index.html文件中引入的js文件
三、webpack处理样式
处理css
- 安装
npm i style-loader css-loader -D- 配置modules下的rules
module.exports = {module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']}]}
};- 使用
处理less
- 安装
npm i less-loader less -D- 配置modules下的rules
module.exports = {module: {rules: [{test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader']}]}
};处理sass
- 安装
npm i sass-loader node-sass -D- 配置modules下的rules
module.exports = {module: {rules: [{test: /\.scss$/,use: ['style-loader', 'css-loader', 'sass-loader']}]}
};处理css前缀
-
安装
npm i postcss-loader autoprefixer -D-
配置 postcss.config.js
项目根目录新建文件：postcss.config.js
const autoprefixer = require('autoprefixer');module.exports = {plugins: [autoprefixer]
};-
修改webpack.config.js中modules下的css的rules
module.exports = {module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader', 'postcss-loader']},]}
};-
package.json中做支持情况的配置
-
测试
处理图片和字体
- 安装
npm i url-loader file-loader -D- 配置modules下的rules
// 单位是字节(1kb = 1024byte)，小于 limit 大小的图片会被转为 base64
// 右键图片属性可以查看图片的字节大小
module.exports = {module: {rules: [{test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use: 'url-loader?limit=16940'}]}
};四、webpack处理JS的语法
- 安装
babel 转换器相关的包
cnpm i babel-loader @babel/core -D
cnpm i @babel/runtime -S
babel 语法插件相关的包
cnpm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D- 配置根目录的babel.config.js
module.exports = {presets: ['@babel/preset-env'],plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
};- 配置modules下的rules
module.exports = {module: {rules: [{test: /\.js$/,use: 'babel-loader',exclude: /node_modules/}]}
};五、单文件组件
传统组件的问题和解决方案
问题
-
全局定义的组件必须保证组件的名称不重复
-
字符串模板缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
-
不支持 CSS 意味着当 HTML 和 JS 组件化时，CSS 明显被遗漏
-
没有构建步骤限制，只能使用 HTML 和 ES5 JS，而不能使用预处理器（Babel）
解决方案
Vue 提供了一个解决方案，使用 Vue 单文件组件
-
template
-
script
-
style
集成Vue
- 安装
npm i vue-loader vue-template-compiler -D- 配置modules下的rules和plugins
const VueLoaderPlugin = require('vue-loader/lib/plugin');module.exports = {module: {rules: [{test: /\.vue$/,loader: 'vue-loader'}]},plugins: [new VueLoaderPlugin()]
};使用Vue
- 安装
- 引入Vue框架
- 创建Vue实例对象，并制定要控制的el区域
- 通过render函数渲染App根组件
六、Vue脚手架
可以用来快速生成 Vue 项目的基础架构
- 安装
npm install -g @vue/cli- 创建项目
1. 基于交互式命令行
vue create my-project
2. 基于图形化界面
vue ui
3. 基于旧版本，创建旧版本vue项目
npm install -g @vue/cli-initvue init webpack my-project- 配置
七、Element-UI
一套为开发者、设计师和产品经理准备的基于 Vue2.0 的桌面端组件库
入口：Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
https://element.eleme.cn/2.13/#/zh-CN
- 安装
npm i element-ui -S- 导入相关资源
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)- 看文档使用
有不明白的或者有其他问题的可以评论区留言噢
私信回复JS思维导图可获取完整知识导图~
今天的知识分享就到这里啦~希望大家在这能学到知识一起分享一起进步，成为更好的自己！
