写在前面
前端的打包工具从以前的webpack发展到今天，已经不局限于此，尤其随着 vite的崛起,快成为了一种速度，也成了学习前端的速度，今天是2022年的最后一天，希望在最后一天大家收获满满，更好的迎接下一年，如果对你有帮助，你的点赞和关注是最后的支持，点赞不断，更新干货不断，让我们一起以这份总结迎接新的一年，元旦快乐，丰收满满。
前言
- webpack是一个全能选手，配置比较复杂，对新手不太友好。
- Rollup是后起之秀，打包更简洁，配置更简单。
- vite把
rollup变成开箱即用，便于新手入门。 - create-vue 是 Vue3 的专用脚手架，使用 vite 创建 Vue3 的项目，也可以选择安装需要的各种插件，基本取代了 vue-cli，除非你想创建 vue2 的项目。
环境配置
Vite 需要 Node.js[1] 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
管理工具
项目的开发中离不开包管理工具，对于开发来说选择对的包管理工具可以提升效率，目前常用的包管理工具有。
NPM
npm 全称Node Package Manager，它是Node.js的软件包管理器，其目标是自动化的依赖性和软件包管理。这意味着，可以在package.json文件中为项目指定所有依赖项（软件包），当需要为其安装依赖项时，只要运行npm install就可以。
YARN
yarn全局安装
npm i yarn -g
全局删除
npm r yarn -g
在新版本的node中，corepack中已经包含了yarn，可以通过启用corepack的方式使yarn启用。首先执行以下命令启用corepack：
corepack enable
查看yarn版本
yarn -v
切换yarn版本，最新版：
corepack prepare yarn@stable --activate
切换为指定版本(1.x.x)的版本：
corepack prepare yarn@1 --activate
常用命令
yarn init （初始化，创建package.json） yarn add xxx（添加依赖） yarn add xxx -D（添加开发依赖） yarn remove xxx（移除包） yarn（自动安装依赖） yarn run（执行自定义脚本） yarn <指令>（执行自定义脚本） yarn global add（全局安装） yarn global remove（全局移除） yarn global bin（全局安装目录）
注意：
如果你用的是yarn3作为包管理器运行的时候请在中间加上node
例如
yarn node .\index.js
如果你感觉来回切换太麻烦，直接 yarn init -2,会在项目里面直接用3版本进行
Yarn镜像配置
// 查看所有配置 yarn config list // 查看(镜像)配置 yarn config get registry // 设置(淘宝)镜像 yarn config set registry https://registry.npm.taobao.org // 恢复(或者重新配置) yarn config delete registry # OR yarn config set https://registry.npmjs.org
PNPM
安装(全局)安装
npm install -g pnpm
常用命令
# 初始化项目 pnpm init（初始化项目，添加package.json） # 安装依赖 pnpm install（安装依赖） # 下载包(XXX) pnpm install XXX pnpm i XXX # -S 默认写入dependencies pnpm add XXX -S # -D devDependencies pnpm add -D # 全局安装 pnpm add -g # 移除包(XXX) pnpm remove XXX # 移除全局包(XXX) pnpm remove XXX --global # 更新所有依赖项 pnpm up # 更新包(XXX) pnpm upgrade XXX # 更新全局包(XXX) pnpm upgrade XXX --global # 设置存储路径 pnpm config set store-dir /path/to/.pnpm-store
Pnpm镜像配置
配置(淘宝)： // 查看所有配置 pnpm config list // 查看(镜像)配置 pnpm config get registry // 设置(淘宝)镜像 pnpm config set registry https://registry.npm.taobao.org // 恢复(或者重新配置) pnpm config delete registry # OR pnpm config set registry https://registry.npmjs.org
项目创建
Vite官网提供了创建Vite项目的脚手架create-vite来创建Vite项目，Vue官网提供了create-vue脚手架来替代@/vue/cli来创建基于Vite的Vue3项目。
搭建第一个 Webpack 项目¶
vue-cli用于创建 vue2 的项目；@vue/cli用于创建 vue3 的项目，当然也支持 vue2。
npm install -g @vue/cli # OR yarn global add @vue/cli # OR pnpm add -g @vue/cli
然后
vue create <project-name> # OR vue ui
搭建第一个 Vite 项目¶
兼容性注意
Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
使用 NPM:
$ npm create vite@latest
使用 Yarn:
$ yarn create vite
使用 PNPM:
$ pnpm create vite
然后按照提示操作即可！
你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:
# npm 6.x npm create vite@latest my-vue-app --template vue # npm 7+, extra double-dash is needed: npm create 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，react-swc，react-swc-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。
社区模板¶
create-vite 是一个快速生成主流框架基础模板的工具。查看 Awesome Vite 仓库的 社区维护模板，里面包含各种工具和不同框架的模板。你可以用如 degit 之类的工具，使用社区模版来搭建项目。
npx degit user/project my-project cd my-project npm install npm run dev
如果该项目使用 main 作为默认分支, 需要在项目名后添加 #main。
npx degit user/project#main my-project
项目支持列表
| JavaScript | TypeScript | 说明 |
| vanilla | vanilla-ts | 用Vite创建vanilla项目 |
| vue | vue-ts | 用Vite创建vue项目 |
| react | react-ts | 用Vite创建react |
| preact | preact-ts | 用Vite创建preact项目 |
| lit | lit-ts | 用Vite创建lit项目 |
| svelte | svelte-ts | 用Vite创建svelte项目 |
搭建一个Vue项目
create-vue 是 Vue3 的专用脚手架，使用 vite 创建 Vue3 的项目，也可以选择安装需要的各种插件，使用更简单。
使用方式
npm init vue@latest(等价)npm create vue@latest # OR yarn create vue@latest # OR pnpm create vue@latest
可选插件
- TypeScript
- JSX Support
- Vue Router for Single Page Application development
- Pinia for state management
- Vitest for Unit testing
- Cypress for both Unit and End-to-End testing
- ESLint for code quality
- Prettier for code formating
配置相关
// vite.config.ts import { defineConfig, Plugin } from 'vite' import vue from '@vitejs/plugin-vue' import vueJsx from "@vitejs/plugin-vue-jsx" import Components from 'unplugin-vue-components/vite' import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers' import { resolve } from 'path' // import { viteThemePlugin, mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme' const pathResolve = (pathStr: string) => { return resolve(__dirname, pathStr); } // https://vitejs.dev/config/ export default defineConfig({ base: './', plugins: [ vue(), vueJsx(), Components({ dts: true, resolvers: [AntDesignVueResolver()], include: [/\.vue$/, /\.tsx$/], directoryAsNamespace: true, }), // viteThemePlugin({ // // Match the color to be modified // colorVariables: [], // }) ], resolve: { alias: { '@': resolve(__dirname, './src') , } }, server: { // 是否开启 https https: false, // 端口号 port: 3000, // 监听所有地址 host: '0.0.0.0', // 服务启动时是否自动打开浏览器 open: false, // 允许跨域 cors: true, // 自定义代理规则 proxy: { }, }, build: { // 设置最终构建的浏览器兼容目标 target: 'es2015', // 构建后是否生成 source map 文件 sourcemap: false, // chunk 大小警告的限制（以 kbs 为单位） chunkSizeWarningLimit: 2000, // 启用/禁用 gzip 压缩大小报告 reportCompressedSize: false, }, css: { preprocessorOptions: { less: { // modifyVars: generateModifyVars(), javascriptEnabled: true, }, }, }, })
语法相关
</code> 是在单文件组件 (SFC) 中使用 <code>composition api</code> 的编译时语法糖。</div><ul style="text-align: left;"><li><code>Vue3</code> 在早期版本（ <code>3.0.0-beta.21</code> 之前）中对 <code>composition api</code> 的支持，只能在组件选项 <code>setup</code> 函数中使用。</li><li>在 <strong>3.0.0-beta.21</strong> 版本中增加了 <code><script setup></code> 的实验特性。如果你使用了，会提示你 <code><script setup></code> 还处在实验特性阶段。</li><li><br /></li></ul><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Ctemplate%3E%5Cn%20%5Cn%3Ch1%3E%7B%7B%20msg%20%7D%7D%3C%2Fh1%3E%5Cn%20%5Cn%3Cbutton%20type%3D%5C%22button%5C%22%20%40click%3D%5C%22add%5C%22%3Ecount%20is%3A%20%7B%7B%20count%20%7D%7D%3C%2Fbutton%3E%5Cn%20%5Cn%3CComponentA%20%2F%3E%5Cn%20%5Cn%3CComponentB%20%2F%3E%5Cn%20%5Cn%3C%2Ftemplate%3E%5Cn%20%5Cn%3Cscript%3E%5Cn%20%5Cnimport%20%7B%20defineComponent%2C%20ref%20%7D%20from%20'vue'%5Cn%20%5Cnimport%20ComponentA%20from%20'%40%2Fcomponents%2FComponentA'%5Cn%20%5Cnimport%20ComponentB%20from%20'%40%2Fcomponents%2FComponentB'%5Cn%20%5Cn%20%5Cn%20%5Cnexport%20default%20defineComponent(%7B%5Cn%20%5Cnname%3A%20'HelloWorld'%2C%5Cn%20%5Cncomponents%3A%20%7B%20ComponentA%2C%20ComponentB%20%7D%2C%5Cn%20%5Cnprops%3A%20%7B%5Cn%20%5Cnmsg%3A%20String%2C%5Cn%20%5Cn%7D%2C%5Cn%20%5Cnsetup(props%2C%20ctx)%20%7B%5Cn%20%5Cnconst%20count%20%3D%20ref(0)%5Cn%20%5Cn%20%5Cn%20%5Cnfunction%20add()%20%7B%5Cn%20%5Cncount.value%2B%2B%5Cn%20%5Cn%7D%5Cn%20%5Cn%2F%2F%20%E4%BD%BF%E7%94%A8return%20%7B%7D%20%E6%8A%8A%E5%8F%98%E9%87%8F%E3%80%81%E6%96%B9%E6%B3%95%E6%9A%B4%E9%9C%B2%E7%BB%99%E6%A8%A1%E6%9D%BF%5Cn%20%5Cnreturn%20%7B%5Cn%20%5Cncount%2C%5Cn%20%5Cnadd%2C%5Cn%20%5Cn%7D%5Cn%20%5Cn%7D%2C%5Cn%20%5Cn%7D)%5Cn%20%5Cn%3C%2Fscript%3E%22%2C%22id%22%3A%22njZB4%22%7D"></div><ul style="text-align: left;"><li>在 <strong>3.2.0</strong> 版本中移除 <code><script setup></code> 的实验状态，从此，宣告 <code><script setup></code> 正式转正使用，成为框架稳定的特性之一。</li></ul><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cscript%20setup%20lang%3D%5C%22ts%5C%22%3E%5Cn%20%5Cnimport%20%7B%20ref%20%7D%20from%20'vue'%5Cn%20%5Cnimport%20ComponentA%20from%20'%40%2Fcomponents%2FComponentA'%5Cn%20%5Cnimport%20ComponentB%20from%20'%40%2Fcomponents%2FComponentB'%5Cn%20%5CndefineProps%3C%7B%20msg%3A%20string%20%7D%3E()%5Cnconst%20count%20%3D%20ref(0)%5Cnfunction%20add()%20%7B%5Cn%20%5Cncount.value%2B%2B%5Cn%20%5Cn%7D%5Cn%20%5Cn%3C%2Fscript%3Ex%5Cn%3Ctemplate%3E%5Cn%20%5Cn%3Ch1%3E%7B%7B%20msg%20%7D%7D%3C%2Fh1%3E%5Cn%20%5Cn%3Cbutton%20type%3D%5C%22button%5C%22%20%40click%3D%5C%22add%5C%22%3Ecount%20is%3A%20%7B%7B%20count%20%7D%7D%3C%2Fbutton%3E%5Cn%20%5Cn%3CComponentA%20%2F%3E%5Cn%20%5Cn%3CComponentB%20%2F%3E%5Cn%20%5Cn%3C%2Ftemplate%3E%22%2C%22id%22%3A%22hFlyM%22%7D"></div><h2 id="g5HG4" style="text-align: center;"><span class="lake-fontsize-14" style="color: #3C70C6;">社区链接</span></h2><ul style="text-align: left;"><li>webpack</li><li>vite</li><li>vue-cli</li><li>vuejs</li></ul><h3 id="RQXdf" style="text-align: left;"><span>参考资料</span></h3><div><span class="lake-fontsize-10" style="color: #3C70C6;">[1]</span></div><div>Node.js: <a href="https://nodejs.org/en/" target="_blank">https://nodejs.org/en/</a></div>
