• Vite项目的初体验 - 非Vite脚手架版本

    开箱即用 （out of box）: 无需做任何的配置，就可以用vite来帮助我们处理构建工作。

    前提 ：node 版本 >= 12.0.0，使用 npm 进行依赖管理。
    本文的案例，从0到1的，一步一步的体会vite的作用。
    本文的阅读顺序，建议从上到下依次阅读，每个步骤之间都具有关联性。

    步骤一 : 先运行一个普通的项目

    开发环境简述

    本文中的案例使用 VSCode 工具。

    • 1

    目录结构

    study-vite
    | -- index.html
    | -- mymath.js
    | -- main.js

    • 1
    • 2
    • 3
    • 4

    文件内容

    mymath.js

    简单定义一个函数，然后导出

    export function sayHello(){
    console.log('Hello world');
}

    • 1
    • 2
    • 3

    main.js

    引入 mymath.js 中的方法，然后调用一下

    import { sayHello } from "./mymath.js";

// 调用一下方法
sayHello();

    • 1
    • 2
    • 3
    • 4

    index.html

    通过 type=“module” 的方式引入 main.js

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    测试一个普通的前端项目
    <script type="module" src="./main.js" >script>
    
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    运行

    注意 ：
    运行时，不可以从浏览器中直接打开index.html文件进行访问，因为有模块的导入导出，
    若是直接访问的话会报错，会提示 跨域问题等。
    index.html:1 Access to script at 'file:///D:/xxx/study-vite/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome-untrusted, https, edge.

    正确的运行姿势 ：
    使用vscode中 LiveServer 进行运行

    在这里插入图片描述

    浏览器中访问index.html，控制台中可以看到正常的输出。

    在这里插入图片描述

    至此，一个基本的项目已经完成了。

    步骤二 :引入node_modules中的依赖，体会无法加载的错误

    本步骤测试使用的依赖是 【lodash】，
    其实用什么依赖无所谓，
    主要是体会一下在node_modules中的模块如果不进行配置是无法加载的。

    npm 初始化项目

    在 项目根目录(study-vite)下执行命令 npm init -y

    执行完毕后，会生成 package.json 文件，
    此时的目录结构就变成了下面的样子：

    study-vite
 | --  index.html
 | --  mymath.js
 | --  main.js
 | --  package.json

    • 1
    • 2
    • 3
    • 4
    • 5

    npm 安装 lodash 依赖

    在 项目根目录(study-vite)下执行命令 npm install lodash -save

    执行完成后会在生成 node_modules 目录，且lodash的依赖会存放于该目录下
    此时的目录结构就变成了下面的样子：

    study-vite
 | -- node_modules
 | --  index.html
 | --  mymath.js
 | --  main.js
 | --  package.json

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    安装完成后，package.json文件中会添加如下内容：

      "dependencies": {
  "lodash": "^4.17.21"
}

    • 1
    • 2
    • 3

    在 main.js 中直接使用 lodash 依赖

    import { sayHello } from "./mymath.js";

// 引入lodash 模块
import {_} from "lodash"

// 调用一下方法
sayHello();

//使用 ： 打印一下lodash
console.log("lodash : ",_)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    运行一下

    当然了，本次运行仍然是通过 Live Server 进行的。
    此时，会提示 无法解析 lodash 这个模块，因为，浏览器是无法直接读取 node_modules 中的依赖的。

    在这里插入图片描述

    至此，问题已经暴露出来了
    没有构建工具的情况下，这些依赖是无法正常加载使用的！

    npm install vite --save-dev ：下载依赖包，只会在开发环境中用到的那种

    步骤三 ： 引入 vite ,体会加载成功的快乐

    说明 ：
    vite 是一个 构建工具，因此，只是在开发过程中使用到。

    npm 安装 vite

    在 项目根目录(study-vite)下执行命令 npm install vite --save-dev

    安装完成后，package.json文件中会添加如下内容：

      "devDependencies": {
     "vite": "^4.5.0"
   }

    • 1
    • 2
    • 3

    修改package.json中的运行脚本

    我们先简单写一个，首先体会的就是 vite 的开箱即用的特点，
    无需做任何其他的配置，直接用。

      "scripts": {
    "dev": "vite"
  },

    • 1
    • 2
    • 3

    运行一下

    因为我们引入了vite ,所以此时，我们再运行项目，就直接使用vite了
    执行如下命令(就是我们再上面添加的脚本命令)：
    npm run dev

    在这里插入图片描述

    浏览器中访问一下

    在这里插入图片描述

    至此，手动添加 vite 并直接使用的案例就完成了。
    非常的丝滑。

  • 相关阅读:
    day31-JQuery04
    性能分析: 快速定位SQL问题
    TypeScript内置类型有哪些？
    WPF中 INotifyPropertyChanged
    鸿蒙应用开发
    【数据结构初阶】顺序表
    EMQX Cloud 影子服务：便捷数据缓存服务，加速 IoT 应用开发
    【MySQL | 运维篇】07、MySQL 分库分表之 MyCat 管理与监控
    Element-ui select远程搜索
    腾讯云OpenCloudOS能安装宝塔Linux面板吗？
  • 原文地址：https://blog.csdn.net/qq_39505245/article/details/134321827