webpack 主入口

1. 读取 options、判断是否为 multiCompiler
2. 判断是否为 watch 模式
3. createCompiler 创建出compiler对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

/**
 * @param {WebpackOptions} rawOptions options object
 * @returns {Compiler} a compiler
 */
const createCompiler = (rawOptions) => {
    // 1. 处理 options
    const options = getNormalizedWebpackOptions(rawOptions)
    // 2. 添加默认配置项
    applyWebpackOptionsBaseDefaults(options)
    const compiler = new Compiler(options.context)
    compiler.options = options
    new NodeEnvironmentPlugin({
        infrastructureLogging: options.infrastructureLogging,
    }).apply(compiler)
    if (Array.isArray(options.plugins)) {
        for (const plugin of options.plugins) {
            if (typeof plugin === 'function') {
                plugin.call(compiler, compiler)
            } else {
                plugin.apply(compiler)
            }
        }
    }
    applyWebpackOptionsDefaults(options)
    compiler.hooks.environment.call()
    compiler.hooks.afterEnvironment.call()
    new WebpackOptionsApply().process(options, compiler)
    compiler.hooks.initialize.call()
    return compiler
}

compiler

- 踩坑记录

- ios 下的 webview 自带拉动到边距时自带回弹效果

由于自带回弹效果，在某些内部需要拖动的情况下，用户体验不好解决办法
在需要滚动的容器上添加 css 样式

1
2
3
4

.xx {
    overflow-x: hidden; // 禁止回弹设置hidden
    overflow-y: scroll; // 需要滚动设置scroll
}

简单记录下，使用 vite 遇到的一些坑

1. vite 和 element-ui 一同使用的问题

vite 2.2.4 以上版本使用 element UI 会出现该报错cannot read property '$isServer'
原因是因为 2.3.0 版本的 esbuild 编译 elementUI 表现不一致（说到底还是 elementUI 不支持 esModule 的问题）
解决方案可见该 issue: https://github.com/vitejs/vite/issues/3370

1. vite 降级为 2.2.4. vite reinstall -> 2.2.4
2. 使用该插件https://www.npmjs.com/package/esbuild-plugin-vite-element-ui（但是该插件目前有坑，可见作者github）
3. 将 vue、vue-router、vuex 和 elementUI 改为 cdn 方式引入

2. vite-plugin-vue2 插件编译 warn 级别也会抛出异常

类似一些常见的 v-for 未提供 key 之类的 warn 会被 vite-plugin-vue2 认作是异常抛除，导致编译失败
我给作者提了 pr：https://github.com/underfin/vite-plugin-vue2/pull/89

3. vite，当省略文件拓展名和项目别名一起使用时会报错

如import App from '@/App'会报错
import App from './App'正常
import App from '@/App.vue'正常
是一个 bug，作者已经修复，待 merge
解决方案和详情可见该 issue：https://github.com/vitejs/vite/issues/3532

TODO 未完待续
有一说一，vite 用起来真的爽，但是目前确实还有不少坑，不过在这飞快的热更新速度面前，不值一提！真香！

数据结构,操作系统，计算机网络和计算机组成原理),外加编译原理和图形学以及软件工程和软件测试。

以上是大前端的基础课程，可以按需所取。如果不学 node，可以省去操作系统和计算机组成原理。
如果不用各类预编译 less 等可以不学编译原理。
如果不用各类 three. js 等图形框架可以不学图形学。
如果不用做单元测试，可以不学软件测试……

作用域是什么？

• 作用域是程序源代码中定义变量的区域

• 作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限

• JavaScript 是词法作用域

执行上下文

• VO
• 作用域链
• this

创建执行上下文有两步

1. 分析
2. 执行

• 使用缩放加绝对定位实现

函数有一个属性 prototype,指向这个函数的原型对象

这个对象是 new 该函数产生的对象的原型

如

1
2
3
4
5

function Person(age) {
    this.age = age
}
let p1 = new Person(1)
let p2 = new Person(2)

p1 和 p2 的原型就是 Person.prototype

原型：对象创建的时候，会通过__proto__属性关联另一个对象，每个对象都会从原型中继承属性

每个原型都有一个constructor属性，执行关联的构造函数即Person

原型链指的是，在找对象属性时，如果在当前对象找不到会顺着对象的原型去不断往上找

大前端

不同技术栈，不能

研发生命周期

代码管理-> 打包构建- > CI&CD -> 测试 OA -> 发布上线

代码管理

• 分支管理
• 合并管理
• 代码审核
• 静态扫描

gitlab
eslint
snonarQube

打包构建

• 依赖管理
• 编译构建
• 安装包加固
• 包大小扫描

webpack
xcode
android studio
metro

CI&CD

• 测试环境部署
• APP 包体验
• 安装包上传
• 小程序包上传

jenkins
docker

测试 OA

• 单元测试
• Monkey 测试
• UI 遍历测试

jest
Junit5
appium

发布上线

• 多渠道打包
• 灰度发布提审
• 生产发布提审
• 发布管理

做平台而不是做工具
从工具链到平台的整合
为了打通流程，做一个工程化平台

工程化平台设计

• 支持全平台
• 前端工程化： 提升研发效率、提升研发质量
• 平台化：统一流程、 统一规范、统一度量

1. 确定平台的各个模块及其范围
2. 定义各个模块交付产物的标准
3. 选择合适的流水线引擎
4. 完善平台公共能力

流水线引擎设计

如何建立大前端标准化研发流程

1. 定义各平台支付产物的标准
2. 流水线统一标准化前端工作流
3. 统一团队研发方式和流程

统一研发规范
如果只是文档形式，落地难
使用静态代码扫描

工程化理解
从你打开编辑器敲下一次字母开始，到最终产物上线，下线的，所要经历过的一系列流程都属于工程化

整体逻辑

getStaticPaths

• 需要使用getStaticPaths返回一个对象，其中path包含动态路由所有的可能值

• ```js
  export async function getStaticPaths() {

    const paths = getAllPostIds()
    return {
        paths,
        fallback: false,
    }
  

  }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

  ### fallback 如果[`fallback`是`false`](https://www.nextjs.cn/docs/basic-features/data-fetching#fallback-false)，则任何未返回的路径[`getStaticPaths`](https://www.nextjs.cn/docs/basic-features/data-fetching#getstaticpaths-static-generation)都将产生**404 页面**。 如果[`fallback`为`true`](https://www.nextjs.cn/docs/basic-features/data-fetching#fallback-true)，则[`getStaticProps`](https://www.nextjs.cn/docs/basic-features/data-fetching#getstaticprops-static-generation)更改行为： - 返回的路径[`getStaticPaths`](https://www.nextjs.cn/docs/basic-features/data-fetching#getstaticpaths-static-generation)将在构建时呈现为 HTML。 - 还没有在生成时生成的路径将**不会**导致 404 页。相反，Next.js 将在对此类路径的第一个请求时提供页面的“后备”版本。 - 在后台，Next.js 将静态生成请求的路径。对同一路径的后续请求将服务于生成的页面，就像在构建时预渲染的其他页面一样。 ### 通配路由 在文件名中使用`...`，可匹配所有具备前置路径的文件 - `pages/posts/[...id].js` matches `/posts/a`, but also `/posts/a/b`, `/posts/a/b/c` and so on. - 需要返回的匹配为数组 ```js export async function getStaticPaths() { const paths = [ { params: { id: ['a', 'b', 'c'], }, }, ] return { paths, fallback: false, } }

404page

创建/pages/404.js

预渲染可以带来更好的性能和 SEO。

Ssg 静态生成：构建时生成

• 静态生成不代表无需数据

• 使用 getStaticProps

ssr 服务端渲染：使用请求然后通过请求生成 html

• 使用 getServerSideProps

csr 客户端渲染

• 如果你不做需要预先渲染的数据，可使用 csr

• 不需要 seo 的部分可以使用 csr