vue更高效的工具-vite

1.webpack

2.vite是什么

3.使用vite创建项目

4.最后总结

🐼webpack

简单来说，Webpack是一个打包工具。

站在2018年的角度，成为一个优秀的前端工程师，除了要会写页面样式和动态效果之外，还需要会用主流的单页面框架、Node.js、简单的前端的性能优化等等。加上现在一部分服务器的逻辑移到了前端上，所以实际上前端的复杂度也是提升了很多。

而Webpack可以帮助我们完成一些任务。比如js压缩、css压缩、编译模板文件等等，从而减少前端的工作量。当然，Webpack功能很强大，能帮我们完成的工作远远不止这些。

下面，让我们慢慢了解Webpack吧~

二、安装

① Webpack的运行需要依赖Node.js，因此需要先安装Node.js。

中文网下载地址：下载 | Node.js 中文网

安装完成之后在命令行窗口输入下面两行命令，若有出现版本号则安装成功。

$ node -v
$ npm -v

② 接着就可以通过npm（一个基于Node.js的包管理工具）来安装Webpack咯~

首先，通过下面的一行命令先生成package.json

$ npm init

③ 接着就能通过npm完成webpack的安装啦

因为npm的源在国外，所以安装速度可能比较慢。建议大家可以用淘宝的npm镜像。但是要注意的一点是，淘宝npm镜像中有一些包会不太一样（一般来说不影响使用）

淘宝 NPM 官网：淘宝 NPM 镜像

通过下面这行代码即可完成cnpm的配置

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

通过下面两行代码即可完成webpack的安装

// 要是不想使用淘宝的npm镜像，就用npm代替cnpm
$ cnpm install -D webpack
$ cnpm install -D webpack-cli

④ 安装完之后在package.json同级目录新建一个webpack.config.js文件。然后再在package.json中增加一个“scripts”配置项。

// 这是package.json
{"name": "zhihu_demo","version": "1.0.0","description": "","main": "index.js","scripts": {"build": "webpack --config webpack.config.js"},"repository": {"type": "git","url": "git+https://github.com/rehellinen/zhihu_demo.git"},"author": "","license": "ISC"
}

接着在命令行中输入下面的这行代码就可以启动webpack啦。

$ npm run build

但是，因为我们的webpack.config.js是空的，因此运行时会报错。具体配置会在下一节课开始讲。

三、一些必要的解释

到这里为止，大家可能会有几个问题。

Q1：命令行窗口怎么打开？

A1：windows系统在左下角的搜索框输入cmd即可

Q2：package.json中的scripts有什么用？

A2：如上面的实例，当我们输入“npm run build”就相当于是通过npm脚本执行了“webpack --config webpack.config.js”。

那为什么我们不直接在命令行中输入后面的那行代码呢？因为上面的实例代码中，webpack是局部安装的，因此在环境变量中不能找到webpack，直接输入那行代码会提示找不到webpack。

那为什么npm的script就能运行呢？我们通过npm安装的包都会放在node_modules的目录中，而这个目录中有一个叫.bin的子目录，在这个目录中放置有webpack的可执行文件。npm的script默认会去.bin中寻找，因此能够运行。

这个问题也能通过全局安装解决，-g表示全局安装。

$ cnpm install -g webpack 
$ cnpm install -g webpack-cli

Q3：为什么推荐使用局部安装？

A3：我们写完的代码可能会给其他人用，而我们不能保证其他人也全局安装了webpack，因此局部安装webpack比较保险。

🐼vite是什么

Vite由两个主要部分组成：

dev server：利用浏览器的ESM能力来提供源文件，具有丰富的内置功能并具有高效的HMR
生产构建：生产环境利用Rollup来构建代码，提供指令用来优化构建过程

Vite作为一个基于浏览器原生ESM的构建工具，它省略了开发环境的打包过程，利用浏览器去解析imports，在服务端按需编译返回。同时，在开发环境拥有速度快到惊人的模块热更新，且热更新的速度不会随着模块增多而变慢。因此，使用Vite进行开发，至少会比Webpack快10倍左右。

1.2 、Vite的主要特性

Instant Server Start —— 即时服务启动
Lightning Fast HMR —— 闪电般快速的热更新
Rich Features —— 丰富的功能
Optimized Build —— 经过优化的构建
Universal Plugin Interface —— 通用的Plugin接口
Fully Typed APIs —— 类型齐全的API

1.3、主流构建工具对比

构建工具指能自动对代码执行检验、转换、压缩等功能的工具。常见功能包括：代码转换、代码打包、代码压缩、HMR、代码检验。构建工具也随着前端技术的发展，从Browserify、Gulp到Parcel，从Webpack到Rollup，一直到最近比较火的面向非打包的Snowpack和Vite。

Browserify

预编译模块化方案（文件打包工具）
Browserify基于流方式干净灵活
遵循commonJS规范打包JS
可引入插件打包CSS等其他资源（非原生能力）

Gulp

基于流的自动化构建工具（工程化）
配置复杂度高，偏向编程式，需要定义task处理构建
支持监听读写文件
可搭配Browserify等模块化工具来使用

Parcel

极速打包（工程化：极速0配置）
零配置，但造成了配置不灵活，内置常见场景的构建方案及其依赖，无需再次安装（babel等）
以html入口，自动检测和打包依赖
不支持SourceMap
无法Tree-shaking

Webpack

预编译模块化方案（工程化：大而全）
通过配置文件达到一站式配置
loader进行资源转换，功能全面（css+js+icon+front）
插件丰富，灵活扩展
社群庞大
大型项目构建慢

Rollup

基于ES6打包（模块打包工具）
Tree-shaking
打包文件小且干净，执行效率更高
更专注于JS打包

Snowpack

基于ESM运行时编译（工程化：ESM运行时）
无需递归循环依赖组装依赖树
默认输出单独的构建模块（未打包），可选择不同打包器（webpack、rollup等）

Vite

基于ESM运行时打包
借鉴了Snowpack
生产环境使用Rollup，集成度更高，相比Snowpack支持多页面、库模式、动态导入自动polyfill等

🐼使用vite创建项目

使用 NPM:

$ npm init vite@latest

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite

然后按照提示操作即可！

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

# npm 6.x
npm init vite@latest my-vue-app --template vue# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue# yarn
yarn create vite my-vue-app --template vue# pnpm
pnpm create vite my-vue-app -- --template vue

查看 create-vite 以获取每个模板的更多细节：vanilla，vanilla-ts，vue，vue-ts，react，react-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。

社区模板#

create-vite 是一个快速生成主流框架基础模板的工具。查看 Awesome Vite 仓库的社区维护模板，里面包含各种工具和不同框架的模板。你可以用如 degit 之类的工具，使用社区模版来搭建项目。

npx degit user/project my-project
cd my-projectnpm install
npm run dev

如果该项目使用 main 作为默认分支, 需要在项目名后添加 #main。

npx degit user/project#main my-project

`index.html` 与项目根目录#

你可能已经注意到，在一个 Vite 项目中，index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的：在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。

Vite 将 index.html 视为源码和模块图的一部分。Vite 解析 <script type="module" src="..."> ，这个标签指向你的 JavaScript 源码。甚至内联引入 JavaScript 的 <script type="module"> 和引用 CSS 的 <link href> 也能利用 Vite 特有的功能被解析。另外，index.html 中的 URL 将被自动转换，因此不再需要 %PUBLIC_URL% 占位符了。

与静态 HTTP 服务器类似，Vite 也有 “根目录” 的概念，即服务文件的位置，在接下来的文档中你将看到它会以 <root> 代称。源码中的绝对 URL 路径将以项目的 “根” 作为基础来解析，因此你可以像在普通的静态文件服务器上一样编写代码（并且功能更强大！）。Vite 还能够处理依赖关系，解析处于根目录外的文件位置，这使得它即使在基于 monorepo 的方案中也十分有用。

Vite 也支持多个 .html 作入口点的多页面应用模式。

指定替代根目录#

vite 以当前工作目录作为根目录启动开发服务器。你也可以通过 vite serve some/sub/dir 来指定一个替代的根目录。

命令行界面#

在安装了 Vite 的项目中，可以在 npm scripts 中使用 vite 可执行文件，或者直接使用 npx vite 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts：

{"scripts": {"dev": "vite", // 启动开发服务器"build": "vite build", // 为生产环境构建产物"serve": "vite preview" // 本地预览生产构建产物}
}

可以指定额外的命令行选项，如 --port 或 --https。运行 npx vite --help 获得完整的命令行选项列表。

使用未发布的功能#

如果你迫不及待想要体验最新的功能，可以自行克隆 vite 仓库到本地机器上然后自行将其链接（将需要 pnpm）：

git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link # you can use your preferred package manager for this step

然后，回到你的 Vite 项目并运行 pnpm link vite（或者使用全局的软链来链接 vite）。重新启动开发服务器来体验新功能吧！

😊个人总结：个人才是刚入门的前端萌新，还是希望多多支持哈哈