{"id":5055,"date":"2025-10-26T12:24:48","date_gmt":"2025-10-26T04:24:48","guid":{"rendered":"https:\/\/blog.odjbinail.cn\/?p=5055"},"modified":"2025-10-26T15:47:38","modified_gmt":"2025-10-26T07:47:38","slug":"vite-%e5%89%8d%e7%ab%af%e6%9e%84%e5%bb%ba%e5%b7%a5%e5%85%b7","status":"publish","type":"post","link":"https:\/\/blog.odjbinail.cn\/?p=5055","title":{"rendered":"Vite &#8211;\u524d\u7aef\u6784\u5efa\u5de5\u5177"},"content":{"rendered":"<h2>Vite \u7279\u70b9<\/h2>\n<ul>\n<li>\u5f00\u53d1\u65f6\u6548\u7387\u6781\u9ad8<\/li>\n<li>\u5f00\u7bb1\u5373\u7528<\/li>\n<li>\u793e\u533a\u4e30\u5bcc\uff0c\u517c\u5bb9 rollup<\/li>\n<li>\u8d85\u9ad8\u901f\u70ed\u91cd\u8f7d<\/li>\n<li>\u9884\u8bbe\u5e94\u7528\u548c\u7c7b\u5e93\u6253\u5305\u6a21\u5f0f<\/li>\n<li>\u524d\u7aef\u7c7b\u5e93\u65e0\u5173<\/li>\n<li>\u542f\u52a8\u9879\u76ee\u5f88\u5feb<\/li>\n<li>\u6bcf\u6b21\u4fee\u6539\u6587\u4ef6\u53ef\u4ee5\u5b9e\u65f6\u66f4\u65b0\uff0c\u4e0d\u50cf vuecli \u7684\u9879\u76ee\u9700\u8981\u597d\u51e0\u79d2\u624d\u53ef\u4ee5\u770b\u5230\u7ed3\u679c<\/li>\n<li>\u9879\u76ee\u5230\u4e00\u5b9a\u89c4\u6a21\u540e, bite \u901f\u5ea6\u7a33\u5b9a<br \/>\n<img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2025\/08\/2025082314565257.png\"  alt=\"\" \/><\/li>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2025\/08\/2025082314565257.png\" alt=\"\" \/><\/li><\/noscript>\n<\/ul>\n<h2>Vite \u7684\u4f7f\u7528<\/h2>\n<ul>\n<li>\u5404\u79cd\u524d\u7aef\u6846\u67b6\u96c6\u6210<\/li>\n<li>Css\uff0c\u56fe\u7247\uff0cWasm \u4e4b\u7c7b\u7684\u7b2c\u4e09\u65b9\u8d44\u6e90\u52a0\u8f7d<\/li>\n<li>Typescript\uff0cJSX \u4e0d\u540c\u8bed\u6cd5\u96c6\u6210<\/li>\n<li>glob import<\/li>\n<li>\u9884\u7f16\u8bd1\u6587\u4ef6<\/li>\n<li>\u540e\u7aef(node.js)\u96c6\u6210<\/li>\n<\/ul>\n<h3>Vite \u6709\u81ea\u8eab\u7684\u63d2\u4ef6\u7cfb\u7edf<\/h3>\n<ul>\n<li>\u751f\u6001: \u517c\u5bb9 rollup \u63d2\u4ef6<\/li>\n<li>rollup\uff0cesbuild \u5b66\u4e60<\/li>\n<li>Vite \u63d2\u4ef6 API \u8be6\u89e3<\/li>\n<li>\u5b98\u65b9\u63d2\u4ef6\u7528\u4f8b\u8be6\u89e3<\/li>\n<\/ul>\n<h1>\u4ec0\u4e48\u662f Vite<\/h1>\n<ul>\n<li>\n<p>\u662f\u6784\u5efa\u5de5\u5177\u7684\u9ad8\u9636\u5c01\u88c5, \u8d77\u521d\u662f\u4e13\u4e3a Vue \u670d\u52a1\u7684, V2 \u8f6c\u4e3a\u6846\u67b6\u65e0\u5173\u7684\u5de5\u5177<br \/>\n\u4e2d\u6587\u6587\u6863: <a href=\"https:\/\/cn.vitejs.dev\/guide\/\">https:\/\/cn.vitejs.dev\/guide\/<\/a><\/p>\n<\/li>\n<li>\n<p>\u4f7f\u7528\u7b80\u5355, \u914d\u7f6e\u9879\u5c11, \u5e95\u5c42\u7528 rollup, \u517c\u5bb9\u4e86\u5176\u63d2\u4ef6, (\u4f7f\u7528\u4e0a\u6bd4 vuecli,  app, webpack \u7b80\u5355\u5f97\u591a)<\/p>\n<\/li>\n<li>\n<p>\u96c6\u6210\u4e86\u5f00\u53d1\u670d\u52a1\u5668 (dev server), \u4e0d\u9700\u8981\u50cf webpack \u4e00\u6837\u989d\u5916\u5b89\u88c5\u7c7b\u4f3c webpack-dev-server \u8fd9\u6837\u7684\u4f9d\u8d56\u8fd8\u8981\u914d\u7f6e\u4f7f\u7528\u3002<\/p>\n<\/li>\n<li>\n<p>\u542f\u52a8\u9879\u76ee\u5feb(\u5f97\u76ca\u4e8e vite \u81ea\u5df1\u7684\u67b6\u6784, es6 \u7684\u901f\u5ea6)<\/p>\n<\/li>\n<li>\n<p>\u4fbf\u4e8e\u6269\u5c55<\/p>\n<\/li>\n<\/ul>\n<h2>Vite \u5bf9\u6bd4\u5176\u4ed6\u6784\u5efa\u5de5\u5177\u7684\u4f18\u52bf<\/h2>\n<p>\u533a\u522b:<\/p>\n<ul>\n<li>High Level API<\/li>\n<li>\u4e0d\u5305\u542b\u81ea\u5df1\u7f16\u8bd1\u80fd\u529b<\/li>\n<li>\u5b8c\u5168\u57fa\u4e8e ESM \u52a0\u8f7d\u65b9\u5f0f\u7684\u5f00\u53d1\u65f6<\/li>\n<\/ul>\n<p>webpack \u66f4\u5168\u9762, rollup \u66f4\u4e13\u4e00, Vite \u66f4\u597d\u7528(\u4e3a\u9879\u76ee\u800c\u751f\u7684, \u800c\u4e0d\u662f\u4e3a\u6784\u5efa\u800c\u751f\u7684, \u51cf\u5c11\u4e86\u5f88\u591a\u914d\u7f6e\u91cf[\u5185\u7f6e dev server \u548c build \u547d\u4ee4, \u5404\u7c7b loader, ])<\/p>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2025\/08\/2025082315472527.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2025\/08\/2025082315472527.png\" alt=\"\" \/><\/p><\/noscript>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2025\/08\/2025082315475049.png\"  alt=\"\" \/><br \/>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2025\/08\/2025082315475049.png\" alt=\"\" \/><br \/><\/noscript>\n<img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2025\/08\/2025082315482735.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2025\/08\/2025082315482735.png\" alt=\"\" \/><\/p><\/noscript>\n<h2>Vite \u521b\u5efa Vue3 \u9879\u76ee<\/h2>\n<ul>\n<li>1.0 \u4ee5 Vue3 \u4e3a\u4e3b<\/li>\n<li>2.0, \u8de8\u6846\u67b6\u221a<\/li>\n<li>npm init vite<\/li>\n<li>vite \u5165\u53e3\u662f index.html \u6587\u4ef6<\/li>\n<li>npm i @vitejs\/plugin-vue-jsx -D<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code class=\"language-vite.config.js\">import { defineConfig } from &#039;vite&#039;\nimport vue from &#039;@vitejs\/plugin-vue&#039;\nimport vueJsx from &#039;@vitejs\/plugin-vue-jsx&#039;\nexport default defineConfig({\n  plugins: [vue(),vueJsx()],\n})<\/code><\/pre>\n<ul>\n<li>\u65b0\u589e App.jsx<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import { defineComponent}   from &quot;vue&quot;;\nexport default defineComponent({\n  name: &quot;App&quot;,\n  setup() {\n    return () =&gt; {\n        return  &lt;div&gt;Hello Vite + Vue!&lt;\/div&gt;\n    };\n  },\n});<\/code><\/pre>\n<ul>\n<li>main.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import { createApp } from &#039;vue&#039;\nimport &#039;.\/style.css&#039;\nimport App from &#039;.\/App&#039;\n\ncreateApp(App).mount(&#039;#app&#039;)<\/code><\/pre>\n<h2>Vite \u521b\u5efa Vue2 \u7684\u9879\u76ee<\/h2>\n<ul>\n<li>npm init vite<\/li>\n<li>\u521b\u5efa vite.config.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import { createVuePlugin } from &#039;vite-plugin-vue2&#039;\nexport default {\n    plugins:[createVuePlugin()]\n}<\/code><\/pre>\n<ul>\n<li>yarn add vite-plugin-vue2<\/li>\n<li>yarn add vue -S<\/li>\n<li>src\/main.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import  Vue from &quot;vue&quot;\nimport App from &quot;.\/App.vue&quot;\nnew Vue({\n  el:&quot;#app&quot;,\n    render:(h)=&gt;h(App)\n}).$mount()<\/code><\/pre>\n<p>vite-vue2 \u6a21\u677f:<br \/>\n<a href=\"https:\/\/github.com\/logue\/vite-vue2-ts-starter\">https:\/\/github.com\/logue\/vite-vue2-ts-starter<\/a><\/p>\n<h2>Vite \u521b\u5efa React \u7684\u9879\u76ee<\/h2>\n<ul>\n<li>fastRefresh\n<ul>\n<li>\u89e3\u51b3\u5f88\u591a rhl \u65e0\u6cd5\u89e3\u51b3\u7684\u95ee\u9898<\/li>\n<li>\u901f\u5ea6\u66f4\u5feb<\/li>\n<li>\u652f\u6301\u5c40\u90e8\u66f4\u65b0<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>npm  init vite<br \/>\nyarn create @vitejs\/app<\/p>\n<h2>Vite \u4e2d\u4f7f\u7528 CSS \u7684\u5404\u79cd\u529f\u80fd<\/h2>\n<p>CSS \u53d8\u91cf  \u539f\u751f CSS Variables<br \/>\n@import alias<br \/>\npostcss<br \/>\ncss-modules<br \/>\ncss pre-processors<\/p>\n<h2>Vite \u4e2d\u4f7f\u7528 Typescript??<\/h2>\n<ul>\n<li>\u53ea\u7f16\u8bd1\u6210 js, \u53ef\u4ee5\u5728\u6d4f\u89c8\u5668\u4e2d\u663e\u793a, \u4e0d\u6821\u9a8c<\/li>\n<li>tsc --noEmit<\/li>\n<\/ul>\n<h2>Vite \u4e2d\u5904\u7406\u9759\u6001\u8d44\u6e90\u7684\u65b9\u6cd5?<\/h2>\n<pre class=\"prettyprint linenums\" ><code class=\"language-test.ts\">\/\/ import test from \".\/test?url\" \/\/\u6587\u4ef6\u8def\u5f84\nimport test from \".\/test?raw\" \/\/\u6587\u4ef6\u4ee3\u7801\u4ee5\u5b57\u7b26\u4e32\u8fd4\u56de\nconsole.log(test)<\/code><\/pre>\n<h2>Vite \u96c6\u6210 eslint \u548c prettier<\/h2>\n<ul>\n<li>\u65b0\u5efa\u6587\u4ef6.eslintrc.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>module.exports = {\n    extends: \"standard\",\n    globals: {\n        postMessage: true\n    },\n    rules: {\n        'space-before-function-paren': 'off'\n    }\n}<\/code><\/pre>\n<ul>\n<li>\n<p>yarn add eslint-config-standard eslint-plugin-import eslint-plugin-promise eslint-plugin-node -D<\/p>\n<\/li>\n<li>\n<p>\u65b0\u5efa\u6587\u4ef6.prettierrc, \u5b89\u88c5 prettier \u63d2\u4ef6<\/p>\n<pre class=\"prettyprint linenums\" ><code>{\n\"singleQuote\": true,\/\/\u5355\u5f15\u53f7\n\"semi\": false\/\/\u5206\u53f7\n}<\/code><\/pre>\n<\/li>\n<li>\n<p>package.json \u547d\u540d, eslint \u6821\u9a8c\u4e0d\u901a\u8fc7\u7684\u5185\u5bb9<br \/>\n&quot;lint&quot;: &quot;eslint --ext js src\/&quot;<\/p>\n<\/li>\n<li>\n<p>\u672a\u901a\u8fc7\u6821\u9a8c, \u963b\u6b62 git commit \u63a8\u9001<br \/>\nyarn add husky -D<br \/>\nnpx husky install<br \/>\nnpx husky add husky\/pre-commit &quot;npm run lit&quot;<\/p>\n<\/li>\n<\/ul>\n<h2>Vite \u4e2d\u7684 env \u73af\u5883\u53d8\u91cf<\/h2>\n<ul>\n<li>Build In<br \/>\nMODE<br \/>\nBASE<em>URL<br \/>\nPROD<br \/>\nDEV<br \/>\n\u5728.env \u6587\u4ef6\u81ea\u5b9a\u4e49, \u53d8\u91cf\u524d\u7f00\u9700\u52a0\u4e0a VITE<\/em><br \/>\n.env.development \u5f00\u53d1\u73af\u5883<br \/>\n.env.production \u751f\u4ea7\u73af\u5883<br \/>\n.env.development.local \u672c\u5730\u5f00\u53d1<\/li>\n<li>\u901a\u8fc7 mode, \u6539\u53d8\u73af\u5883\u53d8\u91cf\u8bfb\u53d6\u7684\u65b9\u5f0f<br \/>\n.env.test<br \/>\n&quot;dev&quot;: &quot;vite --mode test&quot;,<\/li>\n<\/ul>\n<h1>Vite \u7684\u9ad8\u7ea7\u5e94\u7528<\/h1>\n<h2>Vite \u4e2d\u7684 HMR \u70ed\u66f4\u65b0\u529f\u80fd<\/h2>\n<ul>\n<li>main.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import '.\/style.css'\nfunction render(){\n    document.querySelector('#app').innerHTML = `\n  <div>\n    <a href=\"https:\/\/vite.dev\" target=\"_blank\">\n     34111\n    <\/a>\n\n`\n}\n\nrender()\nif(import.meta.hot){\n    import.meta.hot.accept((newModule)=>newModule.render())\n}<\/code><\/pre>\n<h2>Vite \u7684 glob-import \u6279\u91cf\u5bfc\u5165\u529f\u80fd<\/h2>\n<p>\u4f8b\u5982, \u4e0d\u540c\u8bed\u8a00\u5305\u6587\u4ef6<br \/>\n(vite5 \u7248\u672c\u4ee5\u4e0a globEager \u5df2\u5e9f\u5f03)<\/p>\n<pre class=\"prettyprint linenums\" ><code>\/\/\u5f15\u5165\u6587\u4ef6\u5939\u6240\u6709 js \u6587\u4ef6 eg: test-1.js : '.\/*-[0-9]\/*.js'\nconst globModules=import.meta.glob('.\/*.js')\nObject.entries(globModules).forEach(([path,module])=>{\n    console.log( path, module)\n    module().then(m=>console.log(path+':'+m.default))\n})<\/code><\/pre>\n<h2>Vite \u914d\u7f6e\u9879\u5b98\u7f51<\/h2>\n<p>[Vite \u5b98\u65b9\u4e2d\u6587\u6587\u6863](<a href=\"https:\/\/cn.vitejs.dev\/config\/shared-options.html\">https:\/\/cn.vitejs.dev\/config\/shared-options.html<\/a> &quot;Vite \u5b98\u65b9\u4e2d\u6587\u6587\u6863&quot;)<\/p>\n<h1>Rollup<\/h1>\n<h2>\u4ecb\u7ecd<\/h2>\n<ul>\n<li>\u4ee5 ESM \u6807\u51c6\u4e3a\u76ee\u6807\u7684\u6784\u5efa\u5de5\u5177<\/li>\n<li>Tree Shaking<\/li>\n<li>npm i -g rollup<\/li>\n<li>mkdir rollup-test<\/li>\n<li>\u65b0\u5efa index.js<\/li>\n<li>rollup -i index.js --file dist.js<\/li>\n<li>rollup -i index.js --file dist.js --format umd<\/li>\n<li>....\u2191 es\/cjs\/iife<\/li>\n<\/ul>\n<h2>\u547d\u4ee4\u884c\u4f7f\u7528<\/h2>\n<ul>\n<li>rollup -v<\/li>\n<li>rollup -i index.js -i a.js --dir dist <\/li>\n<li>rollup -i index.js --format iife\/cjs\/es\/umd<\/li>\n<li>rollup -i index.js --file dist.js --format umd<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import path from 'path';\nimport React from 'react';\nconsole.log('just a test',path.join(\"\",\"\/hello\"),React.useEffect());\n\nexport const x=12<\/code><\/pre>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2025\/09\/2025091414243021.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2025\/09\/2025091414243021.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>rollup -i index.js --file dist.js --format umd  --name Index   [\u89e3\u51b3\u4e0a\u8ff0\u62a5\u9519]<\/li>\n<li>\u5b9e\u65f6\u76d1\u542c\u6e90\u6587\u4ef6\u53d8\u5316, \u89e6\u53d1 rollup \u91cd\u65b0\u6253\u5305   rollup -i index.js --file dist.js --format umd  --name Index --watch <\/li>\n<\/ul>\n<h3>rollup.config.js<\/h3>\n<ul>\n<li>rollup --config  rollup.config.js\n<pre class=\"prettyprint linenums\" ><code>export default {\n input: 'index.js',\n output: {\n      file: 'dist.js',\n      format: 'umd',\n      name: 'Index'\n }\n}<\/code><\/pre>\n<\/li>\n<li>\u63d2\u4ef6:@rollup\/plugin-json<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Vite \u7279\u70b9 \u5f00\u53d1\u65f6\u6548\u7387\u6781\u9ad8 \u5f00\u7bb1\u5373\u7528 \u793e\u533a\u4e30\u5bcc\uff0c\u517c\u5bb9 rollup \u8d85\u9ad8\u901f\u70ed\u91cd\u8f7d \u9884\u8bbe\u5e94\u7528\u548c\u7c7b\u5e93\u6253\u5305\u6a21\u5f0f  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-5055","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/5055","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5055"}],"version-history":[{"count":53,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/5055\/revisions"}],"predecessor-version":[{"id":5174,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/5055\/revisions\/5174"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5055"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}