115.脚手架工作流程

脚手架工作流程.jpg

脚手架工作流程

• 通过yeoman来构建
• 自定义构建脚手架

自定义构建脚手架

通过命令行工具启动一个程序，获取用户输入，然后创建对应的代码文件

创建my-cli文件夹

npm init -y

npm install ejs inquirer

修改package.json文件

添加"bin":"cli.js"

cli.js添加#!/usr/bin/env node

node cli应用入口文件，必须要有这样的文件头

如果是linux或者macos系统下还需要修改文件权限为755 通过chmod 755 cli.js

以755为例： 1-3位7等于4+2+1，rwx，所有者具有读取、写入、执行权限； 4-6位5等于4+1+0，r-x，同组用户具有读取、执行权限但没有写入权限； 7-9位5，同上，也是r-x，其他用户具有读取、执行权限但没有写入权限。

脚手架工作过程

• 通过命令行交互询问用户问题
• 根据用户回答的问题生成文件

自动化构建：对源代码进行转换生成代码

模块化打包工具的出现

• es module浏览器兼容性问题
• 模块文件过多频繁发送网络请求
• 资源文件模块化问题

webpack-打包工具

使用loader处理特殊资源

使用插件处理自动化构建任务

学习写一个loader

webpack.config.js配置方式

module: {
    rules: [
      {
        test: /\.md$/,
        use: ["html-loader", "./loaders/md-loader.js"],
      },
    ],
  },

loader实现：

传入源代码，返回一个js代码，必须返回js能处理的代码

vite构建工具

所有的构建工具都是处理浏览器不能处理的代码

访问哪个模块打包哪个模块，开发阶段提高效率

vue-cli根据入口文件将所有文件打包所有的文件都会在main.js中，因此有更新后，mian.js会变，页面会全部重新打包加载

将启动时将通过转义的方式将Vuediamagnetic放到当前的运行时环境里

启动一个服务，请求什么加载什么，因为加载的是es module所以会直接返回，因为处理不了Vue文件，所以加载vue的运行时文件

通过type module方式想服务器请求main.js文件

加载的文件后缀名随便，浏览器只认识content-type，vue文件返回的是application/javascript

支持http2.0协议

http2.0协议中启用了头部压缩和链路复用（不用管加载文件多少）