vue3+typescript【4】

已于 2022-07-11 15:46:42 修改
阅读量406 收藏
点赞数 1
分类专栏： vue3+typescript 文章标签： typescript vue.js javascript
于 2022-07-09 17:28:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_51384850/article/details/125696445
版权

babel

babel将es6转es5

  • @babel/core：babel的核心代码，必须安装
  • @babel/cli：可以让我们在命令行使用babel
    npm install @babel/cli @babel/core -D

使用babel来处理我们的源代码：

  • src：是源文件的目录；
  • –out-dir：指定要输出的文件夹dist；
    Babel命令行使用
    npx babel src --out-dir dist

相关插件安装

  1. 比如我们需要转换箭头函数，那么我们就可以使用箭头函数转换相关的插件：
    npm install @babel/plugin-transform-arrow-functions -D
    npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions

  2. const 并没有转成 var
    npm install @babel/plugin-transform-block-scoping -D
    npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions

  3. 安装babel预设
    安装@babel/preset-env预设：
    npm install @babel/preset-env -D
    执行如下命令：
    npx babel src --out-dir dist --presets=@babel/preset-env

  4. babel-loader

module:{
    rules:[
        {
            test:/\.m?js$/,
            use:{
                loader:"babel-loader"
            }
        }
    ]
}

vue源码的打包

  • 在Vue的开发过程中我们有三种方式来编写DOM元素：
    • 方式一：template模板的方式（之前经常使用的方式）；
    • 方式二：render函数的方式，使用h函数来编写渲染的内容；
    • 方式三：通过.vue文件中的template来编写模板

打包必须添加npm install @vue/compiler-sfc -D
还需配置插件const {VueLoaderPlugin}=require('vue-loader/dist/index')
new VueLoaderPlugin()

搭建本地服务器

npm run build

操作一：npm run build，编译相关的代码；
操作二：通过live server或者直接通过浏览器，打开index.html代码，查看效果；

  • 在package.json配置
"scripts": {
    "watch":"webpack --watch"
    }

此时只要webpack以来的所有文件中有一个发生更新代码就会重新编译

  • 安装webpack-dev-server
    在不适用live-server的情况下，可以具备live reloading（实时重新加载）的功能
    npm install webpack-dev-server -D
    修改配置文件，告知dev server，从什么位置查找文件
devServer:{
    contentBase:"./build"
}

target:"web"
"serve":"webpack serve --config wk.config.js"

源代码–>通过devServer打包–>内存–>上传至express服务器–>浏览器向服务器请求数据

  • 开发阶段：contentBase
  • 打包阶段：copywebpackplugin

模块热替换（HMR）

模块热替换是指在 应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面

HMR方式

  • HMR通过如下几种方式，来提高开发的速度：

    • 不重新加载整个页面，这样可以保留某些应用程序的状态不丢失；
    • 只更新需要变化的内容，节省开发的时间；
    • 修改了css、js源代码，会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式；

  • 默认情况下，webpack-dev-server已经支持HMR，我们只需要开启即可；

  • 在不开启HMR的情况下，当我们修改了源代码之后，整个页面会自动刷新，使用的是live reloading
    修改webpack配置

devServer:{
    hot:true
}

需要去指定哪些模块发生更新时，进行HMR
如

if(module.hot){
    module.hot.accept("./util.js",()=>{
        console.log("util更新了")
    })
}

HMR原理

  • webpack-dev-server会创建两个服务：提供静态资源的服务（express）和Socket服务（net.Socket）；
  • express server负责直接提供静态资源的服务（打包后的资源直接被浏览器请求和解析）；
  • HMR Socket Server，是一个socket的长连接：
    • 长连接有一个最好的好处是建立连接后双方可以通信（服务器可以直接发送文件到客户端）；
    • 当服务器监听到对应的模块发生变化时，会生成两个文件.json（manifest文件）和.js文件（update chunk）；
    • 通过长连接，可以直接将这两个文件主动发送给客户端（浏览器）；
    • 浏览器拿到两个新的文件后，通过HMR runtime机制，加载这两个文件，并且针对修改的模块进行更新
  • socket–>长连接–>可以说是即时通信，像微信、聊天、送礼物等。
  • http–>短连接：客户端发送http请求–>和服务器建立连接–>服务器做出响应–>断开连接

Proxy

跨域问题解决：

  • target：表示的是代理到的目标地址，比如 /api-hy/moment会被代理到 http://localhost:8888/api-hy/moment；
  • pathRewrite：默认情况下，我们的 /api-hy 也会被写入到URL中，如果希望删除，可以使用pathRewrite；
  • secure：默认情况下不接收转发到https的服务器上，如果希望支持，可以设置为false；
  • changeOrigin：它表示是否更新代理后请求的headers中host地址，防止访问爬虫地址，被收集项目数据

即在webpack.config.json配置

devServer:{
    proxy:{
        "/api":{
            target:"http://localhost:8888",
            pathRewrite:{
                "^/api":""
            }
        }
    }
}

resolve模块

extensions

  • 默认值是 [‘.wasm’, ‘.mjs’, ‘.js’, ‘.json’]；
  • 所以如果我们代码中想要添加加载 .vue 或者 jsx 或者 ts 等文件时，我们必须自己写上扩展名

alias

当我们项目的目录结构比较深的时候，或者一个文件的路径可能需要 …/…/…/这种路径片段，可以给某些常见的路径起一个别名

alias:{
    "@":resolveApp("./src"),
    pages:resolveApp("./src/pages"),
}

vue-cli

vue的执行
node_modules–>@vue–>cli-service–>package.json–>bin–>vue-cli-service.js

babel

babel将es6转es5

  • @babel/core：babel的核心代码，必须安装
  • @babel/cli：可以让我们在命令行使用babel
    npm install @babel/cli @babel/core -D

使用babel来处理我们的源代码：

  • src：是源文件的目录；
  • –out-dir：指定要输出的文件夹dist；
    Babel命令行使用
    npx babel src --out-dir dist

相关插件安装

  1. 比如我们需要转换箭头函数，那么我们就可以使用箭头函数转换相关的插件：
    npm install @babel/plugin-transform-arrow-functions -D
    npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions

  2. const 并没有转成 var
    npm install @babel/plugin-transform-block-scoping -D
    npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions

  3. 安装babel预设
    安装@babel/preset-env预设：
    npm install @babel/preset-env -D
    执行如下命令：
    npx babel src --out-dir dist --presets=@babel/preset-env

  4. babel-loader

module:{
    rules:[
        {
            test:/\.m?js$/,
            use:{
                loader:"babel-loader"
            }
        }
    ]
}

vue源码的打包

  • 在Vue的开发过程中我们有三种方式来编写DOM元素：
    • 方式一：template模板的方式（之前经常使用的方式）；
    • 方式二：render函数的方式，使用h函数来编写渲染的内容；
    • 方式三：通过.vue文件中的template来编写模板

打包必须添加npm install @vue/compiler-sfc -D
还需配置插件const {VueLoaderPlugin}=require('vue-loader/dist/index')
new VueLoaderPlugin()

搭建本地服务器

npm run build

操作一：npm run build，编译相关的代码；
操作二：通过live server或者直接通过浏览器，打开index.html代码，查看效果；

  • 在package.json配置
"scripts": {
    "watch":"webpack --watch"
    }

此时只要webpack以来的所有文件中有一个发生更新代码就会重新编译

  • 安装webpack-dev-server
    在不适用live-server的情况下，可以具备live reloading（实时重新加载）的功能
    npm install webpack-dev-server -D
    修改配置文件，告知dev server，从什么位置查找文件
devServer:{
    contentBase:"./build"
}

target:"web"
"serve":"webpack serve --config wk.config.js"

源代码–>通过devServer打包–>内存–>上传至express服务器–>浏览器向服务器请求数据

  • 开发阶段：contentBase
  • 打包阶段：copywebpackplugin

模块热替换（HMR）

模块热替换是指在 应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面

HMR方式

  • HMR通过如下几种方式，来提高开发的速度：

    • 不重新加载整个页面，这样可以保留某些应用程序的状态不丢失；
    • 只更新需要变化的内容，节省开发的时间；
    • 修改了css、js源代码，会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式；

  • 默认情况下，webpack-dev-server已经支持HMR，我们只需要开启即可；

  • 在不开启HMR的情况下，当我们修改了源代码之后，整个页面会自动刷新，使用的是live reloading
    修改webpack配置

devServer:{
    hot:true
}

需要去指定哪些模块发生更新时，进行HMR
如

if(module.hot){
    module.hot.accept("./util.js",()=>{
        console.log("util更新了")
    })
}

HMR原理

  • webpack-dev-server会创建两个服务：提供静态资源的服务（express）和Socket服务（net.Socket）；
  • express server负责直接提供静态资源的服务（打包后的资源直接被浏览器请求和解析）；
  • HMR Socket Server，是一个socket的长连接：
    • 长连接有一个最好的好处是建立连接后双方可以通信（服务器可以直接发送文件到客户端）；
    • 当服务器监听到对应的模块发生变化时，会生成两个文件.json（manifest文件）和.js文件（update chunk）；
    • 通过长连接，可以直接将这两个文件主动发送给客户端（浏览器）；
    • 浏览器拿到两个新的文件后，通过HMR runtime机制，加载这两个文件，并且针对修改的模块进行更新
  • socket–>长连接–>可以说是即时通信，像微信、聊天、送礼物等。
  • http–>短连接：客户端发送http请求–>和服务器建立连接–>服务器做出响应–>断开连接

Proxy

跨域问题解决：

  • target：表示的是代理到的目标地址，比如 /api-hy/moment会被代理到 http://localhost:8888/api-hy/moment；
  • pathRewrite：默认情况下，我们的 /api-hy 也会被写入到URL中，如果希望删除，可以使用pathRewrite；
  • secure：默认情况下不接收转发到https的服务器上，如果希望支持，可以设置为false；
  • changeOrigin：它表示是否更新代理后请求的headers中host地址，防止访问爬虫地址，被收集项目数据

即在webpack.config.json配置

devServer:{
    proxy:{
        "/api":{
            target:"http://localhost:8888",
            pathRewrite:{
                "^/api":""
            }
        }
    }
}

resolve模块

extensions

  • 默认值是 [‘.wasm’, ‘.mjs’, ‘.js’, ‘.json’]；
  • 所以如果我们代码中想要添加加载 .vue 或者 jsx 或者 ts 等文件时，我们必须自己写上扩展名

alias

当我们项目的目录结构比较深的时候，或者一个文件的路径可能需要 …/…/…/这种路径片段，可以给某些常见的路径起一个别名

alias:{
    "@":resolveApp("./src"),
    pages:resolveApp("./src/pages"),
}

vue-cli

vue的执行
node_modules–>@vue–>cli-service–>package.json–>bin–>vue-cli-service.js

vite

前端开发与构建工具

vite的构造

它主要由两部分组成：

  • 一个开发服务器，它基于原生ES模块提供了丰富的内建功能，HMR的速度非常快速；
  • 一套构建指令，它使用rollup打开我们的代码，并且它是预配置的，可以输出生成环境的优化过的静态资源

vite的好处

很火，但还不是主流

  • 首先，我们会发现在使用loadash时，加载了上百个模块的js代码，对于浏览器发送请求是巨大的消耗；
  • 其次，我们的代码中如果有TypeScript、less、vue等代码时，浏览器并不能直接识别；
  • 事实上，vite就帮助我们解决了上面的所有问题
    即vite导包路径简单了，不需要后缀名。同时vite是支持css、ts、vue文件的

安装与使用

安装vite
npm install vite –g # 全局安装
npm install vite –D # 局部安装

通过vite来启动项目：
npx vite

直接通过npx vite build打包

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值