前准备
yarn包管理器
==注意: 如果yarn实在安装不上可以用npm==
快速、可靠、安全的依赖管理工具。(类似npm作用)
中文官网地址: Yarn 中文文档
下载yarn
下载地址: 安装 | Yarn 中文文档
-
windows - 软件包(在笔记文件夹里)
-
==建议不要安装到中文路径下==
-
==建议和node安装到一个盘符下==
-
-
mac - 通过命令安装(也可还用npm)
sudo npm i -g yarn
如果上面不行, 试试这个
curl -o- -L https://yarnpkg.com/install.sh | bash
使用yarn
与npm类似, 可以试试, 新建一个空白文件夹, 执行以下命令尝试一下
# 1. 初始化, 得到package.json文件(终端路径所在文件夹下)
yarn init
# 类似: npm init
# 2. 添加依赖(下包)
# 语法: yarn add [package]
# 语法: yarn add [package]@[version]
yarn add jquery
yarn add jquery@3.5.1
# 类似: npm install jquery
# 3. 移除包
# 语法: yarn remove [package]
yarn remove jquery
# 类似: npm remove jquery
# 4. 安装项目全部依赖(一般拿到别人的项目时, 缺少node_modules)
yarn
# 会根据当前项目package.json记录的包名和版本, 全部下载到当前工程中
# 类似: npm i
# 5. 全局
# 安装: yarn global add [package]
# 卸载: yarn global remove [package]
# 注意: global一定在add左边
yarn global add @vue/cli
# 如何使用, 为明天学习vue做铺垫
# 类似: npm install -g @vue/cli
yarn可能遇到的问题
如果报错参考报错文档: 报错总结
建议安装的vscode插件
文件夹和文件的关系, 和该创建文件, 不要创建文件夹了
知识点自测
对这些知识点了如指掌, 学习今天的内容会轻松很多
- 如何使用ES6模块化
-
默认导出和导入
// 默认导出
export default {
a: 10,
b: 20
}
// 默认导入
import Obj from 'js文件路径'
// 按需导出
// 按需导出
export {
a: 10,
b: 20
}
// 按需导入
import {a, b} from 'js文件路径'
import * as Obj from 'js文件路径' // 搜集*所有按需导出, 合并到变量obj中
无导出和导入(只为让js代码执行)
// 无导出
Array.prototype.MyForEach = function(){
// ...内部实现略
}
// 无导入
import "js文件路径"
// 后面用数组就可以调用MyForEach方法了
- 字体图标的使用
-
去阿里巴巴矢量图标库, 选中想要的图标, 登录后, 生成css文件和字体文件
-
下载css文件和字体文件, 也可以使用在线地址
-
在自己页面中引入iconfont.css, 并在想显示字体图标的标签上使用类名即可
-
- ==箭头函数非常熟练, 伸手就写==
// 1. 基础定义
const fn = () => {}
fn()
// 2. 有参, 有返回值
const fn2 = (a, b) => {return a + b}
fn(10, 20); // 结果是30
// 3. 参数"只有一个", 省略()
const fn3 = a => {return a * 2}
fn(50); // 结果是100
// 4. 函数体"只有一句"可以省略大括号和return, "默认返回这句话结果"给函数调用地方
const fn4 = a => a * 2;
fn(50); // 结果是100
什么是服务器, 本地如何搭建服务器, 服务器和浏览器关系, 什么是请求和响应
// 1. 什么是服务器
// 服务器是一台性能高, 24小时可以开机的电脑
// 服务器可以提供服务(例如: 文件存储, 网页浏览, 资源返回)
// 2. 本地如何搭建服务器
// 安装node软件环境, 下载express模块包, 编写相关代码, 即可得到一个web服务器, 给前端返回资源
// 3. 服务器和浏览器的关系
// 浏览器不负责保存网页, 都要靠着url地址去服务器后端, 请求网页相关代码, 回来在浏览器上解析显示
// 浏览器也不负责保存数据, 如果是前后端分离项目, 也要用ajax调用后端接口, 拿到数据回到浏览器上铺设显示
// 4. 请求和响应区别
// 浏览器 -> 请求资源 -> 服务器
// 浏览器 <- 响应数据 <- 服务器
- 开发环境 和 生产环境 以及英文"development", "production" 2个单词会写会读
- 初始化包环境和package.json文件作用
// npm下载的包和对应版本号, 都会记录到package.json文件里 // 把项目发给别人, 他也用包管理器, 一个命令就能下载你项目需要的所有第三方依赖包
- 终端的熟练使用: 切换路径, 清屏, 包下载命令等
切换路径 cd 清屏 cls 或者 clear
- 对base64字符串, 图片转base64字符串了解 在线装换图片base64图片在线转换工具 - 站长工具
1.webpack-概念
-
现代 javascript 应用程序的 静态模块打包器 (module bundler)
-
静态: 文件资源
-
模块: node环境, 引入文件, 遵守模块化语法
-
-
除了合并代码, 还可以翻译和压缩代码
-
less/sass -> css
-
ES6/7/8 -> ES5
-
html/css/js -> 压缩合并
-
2.webpack-使用前-准备
目标
用webpack, 需要准备什么
软件
webpack依赖Node环境
npm或yarn等模块管理工具
步骤
-
创建Day01_webpack基础使用文件夹
-
初始化包环境
yarn init
-
安装依赖包
为何指定版本: 防止以后包更新, 造成课程内容报错
yarn add webpack@5.31.2 webpack-cli@4.6.0 -D
-
在package.json中, 配置scripts(自定义命令)
scripts: { "build": "webpack" }
步骤
-
新建src/add/add.js - 定义求和函数导出
export const addFn = (a, b) => a + b
-
新建src/index.js导入使用
// webpack打包的入口 import { addFn } from './add/add' console.log(addFn(5, 2));
-
运行打包命令
yarn build
效果
-
src并列处, 生成dist目录和main.js文件
-
查看main.js文件, 是打包压缩后的代码
(()=>{"use strict";console.log(7)})();
4.webpack-更新打包
目标
代码变化, 如何打包
步骤
-
新建src/tool/tool.js - 导出数组求和方法
export const getArrSum = arr => arr.reduce((sum, val) => sum += val, 0)
-
src/index.js - 导入使用
import { addFn } from './add/add' import { getArrSum } from './tool/tool' console.log(addFn(5, 2)); console.log(getArrSum([5, 6, 9, 10]));
-
重新打包
yarn build
效果
-
自动覆盖原dist, 结果压缩极致
(()=>{"use strict";console.log(7),console.log([5,6,9,10].reduce(((o,e)=>o+e),0))})();
5.webpack-配置修改
目标
修改默认入口和出口
默认入口: src/index.js
默认出口: dist/main.js
步骤
-
项目根目录 - 新建webpack.config.js文件 (默认配置文件名)
-
填入配置项
const path = require("path") module.exports = { entry: "./src/main.js", // enter: 默认入口 output: { path: path.join(__dirname, "dist"), // 出口"文件夹"名 filename: "bundle.js" // 出口"文件"名 } }
-
修改代码里src/index.js 为 src/main.js
-
重新打包观察输出文件名字
6.webpack-打包流程图
目标
运行yarn build发生了什么
图示流程
-
敲击命令, 代码执行过程
代码源文件和webpack之间关系图
源码一定要和入口产生直接/间接引入关系, 才会被一起打包
7.webpack-案例-发送ajax
目标
webpack打包前端项目
yarn下的包, 如何作用在前端项目
步骤
-
回顾从0准备环境
-
初始化包环境
-
下载依赖包
-
配置自定义打包命令
-
-
下载jquery
yarn add axios
-
新建public/index.html - 前端首页
-
新建src/main.js - webpack打包入口
index.html 准备一些li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button>按钮</button>
</body>
</html>
在src/main.js引入jquery
import axios from 'axios'
main.js中编写, 隔行变色代码
document.querySelector("button").onclick = function() {
axios({
url: 'http://www.liulongbin.top:3009/api/getbooks'
}).then(({data:res}) => {
console.log(res);
});
}
执行打包命令
yarn build
-
把public/index.html手动复制到dist下
再手动引入打包后bundle.js
<script src="../dist/bundle.js"></script>
关键
-
yarn下的包, 在js文件里, 用import语法导入
浏览器不支持import语法
-
webpack翻译打包后输出到bundle.js
-
html页面引入翻译打包后的js即可正常使用
8.webpack-插件-自动生成html文件
目标
学习webpack插件html-webpack-plugin
自动生成html文件
自动引入打包后文件
步骤
-
下载插件
yarn add html-webpack-plugin@5.3.1 -D
webpack.config.js配置
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// ...省略其他代码
plugins: [
new HtmlWebpackPlugin({
// 以此为基准生成打包后html文件
template: './public/index.html'
})
]
}
-
重新打包后观察dist下
-
自动生成html文件
-
自动引入打包后js文件
-
总结: webpack就像一个人, webpack.config.js是人物属性, 给它穿什么装备它就干什么活
9.webpack-加载器-处理css文件问题
目标
webpack能否打包css文件
步骤
1.新建 - src/css/index.css
2.编写去除li圆点样式代码
button {
width: 200px;
height: 50px;
}
3.==在main.js引入index.css==
一定要引入到入口才会被webpack打包
import "./css/index.css"
4.执行打包命令观察效果
错误解释: 你可能需要一个loader来支持这种类型文件, 解析css代码
原因: webpack默认只识别js文件
10.webpack-加载器-处理css文件
目标
学习loader加载器, 打包更多类型文件
步骤
-
安装依赖
需要这2个模块包, 帮助webpack打包css
yarn add css-loader@5.2.1 style-loader@2.0.0 -D
-
webpack.config.js 配置
module.exports = { // ...其他代码 module: { // 如何处理项目中不同模块文件 rules: [ // 规则 { test: /\.css$/, // 匹配所有的css文件 // use数组里从右向左运行 // 先用 css-loader 让webpack能够识别 css 文件的内容并打包 // 再用 style-loader 将样式, 把css插入到dom中 use: [ "style-loader", "css-loader"] } ] } }
-
执行打包命令, 观察打包后dist下
效果
-
css代码被打包进了dist/bundle.js中
-
运行时, css代码插入到html的style标签中
11.webpack-加载器-处理less文件
目标
学习less-loader处理.less文件
步骤
-
新建src/less/index.less - 设置li字体大小24px
@size:24px; body { button { font-size: @size; } }
-
引入到main.js中
import "./less/index.less"
-
下载依赖包
yarn add less@4.1.1 less-loader@8.1.0 -D
-
webpack.config.js 配置
module: {
rules: [
// ...省略其他
{
test: /\.less$/, // 匹配.less结尾文件
// 使用less-loader, 让webpack处理less文件, 内置还会用less模块, 翻译less代码成css代码
use: [ "style-loader", "css-loader", 'less-loader']
}
]
}
总结: 只要找到对应的loader加载器, 就能让webpack处理不同类型文件
12.webpack-加载器-处理图片文件
目标
配置webpack, 打包图片文件
步骤
-
素材文件夹/2个图文件
-
在css/less/index.less - 把小图片用做背景图
body{ background: url(../assets/logo_small.png) no-repeat center; }
-
在src/main.js - 把大图插入到创建的img标签上, 添加body上显示
// 引入图片-使用
import imgUrl from './assets/1.gif'
const theImg = document.createElement("img")
theImg.src = imgUrl
document.body.appendChild(theImg)