随笔分类 - Tools
摘要：所谓包的说明文件，也就是 package.json，当我们使用 npm init 去初始化一个项目的时候，就会自动的生成一个package.json 文件。 关于 package.json，官网是有详细的配置项说明的：https://docs.npmjs.com/cli/v9/configuring
阅读全文
摘要：平时用的最多的指令可能就 3 个： npm init -y npm install xxx（npm i xxx） npm uninstall xxx（npm rm xxx） 所有的指令实际上可以在 npm 官网上面看到的：https://docs.npmjs.com/cli/v9/commands
阅读全文
摘要：自定义插件 在 PostCSS 官网，实际上已经介绍了如何去编写一个自定义插件：https://postcss.org/docs/writing-a-postcss-plugin 需要有一个模板 module.exports = (opts = {}) => { // Plugin creator
阅读全文
摘要：postcss-cli和配置文件 postcss-cli 配置文件 postcss-cli cli 是一组单词的缩写（command line interface），为你提供了一组在命令行中可以操作的命令来进行处理。 postcss-cli 通过给我们提供一些命令行的命令来简化 postcss 的使
阅读全文
摘要：optimization optimization这个配置项内部的很多优化策略都是在生产环境默认开启的，启用这些规则从一定程序上来讲可以显著减少 bundle 体积，优化代码生成，帮助长期缓存等。 optimization.minimize optimization.minimize指定 webpa
阅读全文
摘要：代码准备 由于需要演示webpack的一些优化处理，因此代码提前做了一些处理， 引入了vue-router路由，创建了几个view页面 引入了element-plus，axios，echarts，vue-echarts，@vueuse等组件丰富页面展示 引入了unplugin-vue-compone
阅读全文
摘要：esbuild自定义插件 插件开发其实就是基于原有的体系结构中进行扩展和自定义。 Esbuild 插件也不例外，通过 Esbuild 插件我们可以扩展 Esbuild 原有的路径解析、模块加载等方面的能力，并在 Esbuild 的构建过程中执行一系列自定义的逻辑。 esbuild 插件是一个带有na
阅读全文
摘要：transform API transform/transformSync 对单个字符串进行操作，不需要访问文件系统。非常适合在没有文件系统的环境中使用或作为另一个工具链的一部分，它提供了两个参数： transform(str: string, options?: Config): Promise<
阅读全文
摘要：esbuild 命令行调用 使用 Esbuild 有 2 种方式，分别是 命令行调用和代码调用。 无论如何我先npm init -y创建一个新项目，然后通过如下的命令完成 Esbuild 的安装: npm i esbuild 查看esbuild版本 ./node_modules/.bin/esbui
阅读全文
摘要：如果你想执行一个本地安装的软件包，你只需要输入： $ npx your-package npx 将检查 <command> 或 <package> 是否存在于 $PATH 或本地项目的二进制文件中，如果存在，npx 将执行它。 上面的代码可以直接简写为 npx esbuild src/index.t
阅读全文
摘要：关于HTTP： https://www.cnblogs.com/Answer1215/p/18729206 DNS 打包方式： 所有代码（包括 lodash-es、element-ui 等）被打包到一起，部署时只需请求一个或几个大文件。 优点是简单，不需要额外的网络请求；缺点是文件体积大，首次加载延
阅读全文
摘要：Code Splitting 打包构建中的代码拆分（Code Splitting）是一种优化技术，它将应用程序的代码拆分成多个小块（chunks），并在需要时按需加载这些代码块。这种技术的目的是提高应用程序的性能和用户体验，主要有以下几个原因： 减少初始加载时间 当应用程序的代码被打包成一个单独的文
阅读全文
摘要：npm i <packagename> --legacy-peer-deps --legacy-peer-deps: Bypassing Peer Dependency Checks (Use with Caution) Packages often rely on other packages t
阅读全文
摘要：Offical plugins: https://cn.vitejs.dev/plugins/ Commuity plugins: https://github.com/vitejs/awesome-vite#plugins Rollup plguins: https://vite-rollup-p
阅读全文
摘要：In vite.config.ts resolve: { alias: { "@": path.resolve(__dirname, "src"), "@assets": path.resolve(__dirname, "src/assets"), }, }, tsconfig.json "comp
阅读全文
摘要：PreProcessor Using Scss Install: pnpm add sass -D Code: // filename: src/views/404.vue <template> <div title="404">404</div> <p>Page Not Found</p> </t
阅读全文
摘要：使用Vite模板vue-ts. https://github.com/vitejs/vite/tree/main/packages/create-vite 一个组件在没加入Lodash之前： 当加入lodash之后，会自动把它加入到.vite/deps中去： 假如不用依赖构建 vite.config
阅读全文
摘要：https://cn.vitejs.dev/guide/env-and-mode#env-variables-and-modes 添加额外的环境变量 .env #标题 VITE_APP_TITLE='Vite App' #端口 VITE_PORT=5173 #是否自动打开浏览器 VITE_OPEN=
阅读全文
摘要：Overview 为什么选Vite： https://cn.vite.dev/guide/why.html esbuild, Rollup: https://cn.vite.dev/guide/why.html#why-bundle-for-production Quick start 1. Sta
阅读全文
摘要：关于部署网站，理论上来讲，只要你有一个服务器，你要采用什么样的方式来部署都是可以的。但是前提是你需要有一个服务器（物理机、云服务器）。 这节课我们部署文档网站选择使用 github 来进行部署，因为 GitHub 为我们提供了一个免费的服务器，一个账号只有一个，只要你在 GitHub 上面有账号，你
阅读全文
浙公网安备 33010602011771号