【第11期】这可能是你2022年见过最全的工作总结

写在前面

前端的打包工具从以前的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

项目支持列表

搭建一个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,
      },
    },
  },
})

语法相关

<script setup> 是在单文件组件 (SFC) 中使用 composition api 的编译时语法糖。

• Vue3 在早期版本（ 3.0.0-beta.21 之前）中对 composition api 的支持，只能在组件选项 setup 函数中使用。
• 在 3.0.0-beta.21 版本中增加了 <script setup> 的实验特性。如果你使用了，会提示你 <script setup> 还处在实验特性阶段。
• 
  

<template>
 
<h1>{{ msg }}</h1>
 
<button type="button" @click="add">count is: {{ count }}</button>
 
<ComponentA />
 
<ComponentB />
 
</template>
 
<script>
 
import { defineComponent, ref } from 'vue'
 
import ComponentA from '@/components/ComponentA'
 
import ComponentB from '@/components/ComponentB'
 
 
 
export default defineComponent({
 
name: 'HelloWorld',
 
components: { ComponentA, ComponentB },
 
props: {
 
msg: String,
 
},
 
setup(props, ctx) {
 
const count = ref(0)
 
 
 
function add() {
 
count.value++
 
}
 
// 使用return {} 把变量、方法暴露给模板
 
return {
 
count,
 
add,
 
}
 
},
 
})
 
</script>

• 在 3.2.0 版本中移除 <script setup> 的实验状态，从此，宣告 <script setup> 正式转正使用，成为框架稳定的特性之一。

<script setup lang="ts">
 
import { ref } from 'vue'
 
import ComponentA from '@/components/ComponentA'
 
import ComponentB from '@/components/ComponentB'
 
defineProps<{ msg: string }>()
const count = ref(0)
function add() {
 
count.value++
 
}
 
</script>x
<template>
 
<h1>{{ msg }}</h1>
 
<button type="button" @click="add">count is: {{ count }}</button>
 
<ComponentA />
 
<ComponentB />
 
</template>

社区链接

• webpack
• vite
• vue-cli
• vuejs

参考资料