这篇文章主要讲解了“怎么手写vite插件”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么手写vite插件”吧！vite 其实就是一个由原生ES Module驱动的新型 Web 开发前端构建工具。vite 插件 就可以很好的扩展 vite 自身不能做到的事情，比如 文件图片的压缩、 对 commonjs 的支持、 打包进度条 等等。相信在座的每位同学，到现在对 webpack 的相关配置以及常用插件都了如指掌了吧；vite 作为一个新型的前端构建工具，它还很年轻，也有很多扩展性，那么为什么我们不趁现在与它一起携手前进呢？做一些于你于我于大家更有意义的事呢？要想写一个插件，那必须从创建一个项目开始，下面的 vite 插件通用模板 大家以后写插件可以直接clone使用；插件通用模板 github：体验入口插件 github：体验入口建议包管理器使用优先级：pnpm > yarn > npm > cnpm长话短说，直接开干 ~1.1 创建一个文件夹并且初始化：初始化按照提示操作即可1.2 安装 typescript1.3 配置 tsconfig.json1.4 安装 vite安装 eslint配置 .eslintrc：配置连接安装 prettier （可选）配置 .prettierrc ：配置连接其中的 vite 插件函数钩子会在下面详细详解 ~到这里，那么我们的基本模版就建好了，但是我们现在思考一下，我们应该怎么去运行这个插件呢？那么我们就免费云主机域名需要创建一些 examples 例子来运行这个代码了；我这里创建了三套项目 demo，大家直接 copy 就行了，这里就不详细介绍了vite-reactvite-vue2vite-vue3如果你的插件需要多跑一些 demo，自行创建项目即可；那么下面我们就需要配置 examples 下的项目与当前根目录的插件做一个联调了（下面以 examples/vite-vue3 为例）。修改 examples/vite-vue3/package.json上面意思就是说：要把 examples/vite-vue3 项目中的 vite 版本与根目录 vite-plugin-template 的版本一致；同时要把 examples/vite-vue3 项目中的 vite-plugin-template 指向你当前根目录所开发的插件；引入插件： examples/vite-vue3/vite.config.ts安装： cd examples/vite-vue3 && pnpm install注意：examples/vite-vue2 和 examples/vite-react 的配置与这一致思考：到这里，我们再思考一下，我们把 examples/vite-vue3 中的项目配置好了，但是我们应该怎么去运行呢？直接去 examples/vite-vue3 目录下运行 pnpm run build 或者 pnpm run dev ？这样显然是不能运行成功的，因为我们的根目录下的 src/index.ts 是没法直接运行的，所以我们需要把 .ts 文件转义成 .js 文件；那么我们怎么处理呢？那么我们不得不去试着用用一个轻小且无需配置的工具 tsup 了。tsup 是一个轻小且无需配置的，由 esbuild 支持的构建工具；同时它可以直接把 .ts、.tsx 转成不同格式 esm、cjs、iife 的工具；安装 tsup在根目录下的 package.json 中配置开发环境运行：实时监听文件修改后重新打包（热更新）运行 examples 中的任意一个项目（以 vite-vue3 为例）注意：如果你的插件只会在 build 时运行，那就设置”example:vue3″: “cd examples/vite-vue3 && pnpm run build” ；反之就运行pnpm run dev输出：到这里你就可以 边开发边运行 了，尤雨溪看了都说爽歪歪 ~安装 bumpp 添加版本控制与 tag配置 package.json开发完插件后运行发布那么到这里，我们的 vite 插件模板 就已经写好了，大家可以直接克隆 vite-plugin-template 模板 使用；如果你对 vite 的插件钩子 和 实现一个真正的 vite 插件 感兴趣可以继续往下面看；enforce ：值可以是pre或post ， pre 会较于 post 先执行；apply ：值可以是 build 或 serve 亦可以是一个函数，指明它们仅在 build 或 serve 模式时调用；config(config, env) ：可以在 vite 被解析之前修改 vite 的相关配置。钩子接收原始用户配置 config 和一个描述配置环境的变量env；configResolved(resolvedConfig) ：在解析 vite 配置后调用。使用这个钩子读取和存储最终解析的配置。当插件需要根据运行的命令做一些不同的事情时，它很有用。configureServer(server) ：主要用来配置开发服务器，为 dev-server (connect 应用程序) 添加自定义的中间件；transformIndexHtml(html) ：转换 index.html 的专用钩子。钩子接收当前的 HTML 字符串和转换上下文；handleHotUpdate(ctx)：执行自定义HMR更新，可以通过ws往客户端发送自定义的事件；options(options) ：在服务器启动时被调用：获取、操纵Rollup选项，严格意义上来讲，它执行于属于构建阶段之前；buildStart(options)：在每次开始构建时调用；resolveId(source, importer, options)：在每个传入模块请求时被调用，创建自定义确认函数，可以用来定位第三方依赖；load(id)：在每个传入模块请求时被调用，可以自定义加载器，可用来返回自定义的内容；transform(code, id)：在每个传入模块请求时被调用，主要是用来转换单个模块；buildEnd()：在构建阶段结束后被调用，此处构建结束只是代表所有模块转义完成；outputOptions(options)：接受输出参数；renderStart(outputOptions, inputOptions)：每次 bundle.generate 和 bundle.write 调用时都会被触发；augmentChunkHash(chunkInfo)：用来给 chunk 增加 hash；renderChunk(code, chunk, options)：转译单个的chunk时触发。rollup 输出每一个chunk文件的时候都会调用；generateBundle(options, bundle, isWrite)：在调用 bundle.write 之前立即触发这个 hook；writeBundle(options, bundle)：在调用 bundle.write后，所有的chunk都写入文件后，最后会调用一次 writeBundle；closeBundle()：在服务器关闭时被调用别名处理Alias用户插件设置enforce: ‘pre’vite 核心插件用户插件未设置enforcevite 构建插件用户插件设置enforce: ‘post’vite 构建后置插件(minify, manifest, reporting)下面以 vite 打包进度条 插件为例inde.tscache.ts感谢各位的阅读，以上就是“怎么手写vite插件”的内容了，经过本文的学习后，相信大家对怎么手写vite插件这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是百云主机，小编将为大家推送更多相关知识点的文章，欢迎关注！
这篇文章主要讲解了“C++装最多水的容器问题怎么解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“C++装最多水的容器问题怎么解决”吧！Givennnon-negative integersa1,a2, ……
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
