Vue.js框架 - 模具行业Web开发参考——模具行业从业者必备知识手册

system 2

<h3>Which dist file to use?</h3>

<h4>From CDN or without a Bundler</h4>

<ul>
<li><strong><code>vue(.runtime).global(.prod).js</code></strong>:</li>
</ul>

<ul>
<li>For direct use via <code><script src="..."></code> in the browser. Exposes the <code>Vue</code> global.</li>
<li>Note that global builds are not <a href="https://github.com/umdjs/umd">UMD</a> builds. They are built as <a href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">IIFEs</a> and is only meant for direct use via <code><script src="..."></code>.</li>
<li>In-browser template compilation:</li>
<li><strong><code>vue.global.js</code></strong> is the "full" build that includes both the compiler and the runtime so it supports compiling templates on the fly.</li>
<li><strong><code>vue.runtime.global.js</code></strong> contains only the runtime and requires templates to be pre-compiled during a build step.</li>
<li>Inlines all Vue core internal packages - i.e. it's a single file with no dependencies on other files. This means you <strong>must</strong> import everything from this file and this file only to ensure you are getting the same instance of code.</li>
<li>Contains hard-coded prod/dev branches, and the prod build is pre-minified. Use the <code>*.prod.js</code> files for production.</li>
</ul>

<ul>
<li><strong><code>vue(.runtime).esm-browser(.prod).js</code></strong>:</li>
<li>For usage via native ES modules imports (in browser via <code><script type="module"></code>).</li>
<li>Shares the same runtime compilation, dependency inlining and hard-coded prod/dev behavior with the global build.</li>
</ul>

<h4>With a Bundler</h4>

<ul>
<li><strong><code>vue(.runtime).esm-bundler.js</code></strong>:</li>
</ul>

<ul>
<li>For use with bundlers like <code>webpack</code>, <code>rollup</code> and <code>parcel</code>.</li>
<li>Leaves prod/dev branches with <code>process.env.NODE_ENV</code> guards (must be replaced by bundler)</li>
<li>Does not ship minified builds (to be done together with the rest of the code after bundling)</li>
<li>Imports dependencies (e.g. <code>@vue/runtime-core</code>, <code>@vue/compiler-core</code>)</li>
<li>Imported dependencies are also <code>esm-bundler</code> builds and will in turn import their dependencies (e.g. <code>@vue/runtime-core</code> imports <code>@vue/reactivity</code>)</li>
<li>This means you <strong>can</strong> install/import these deps individually without ending up with different instances of these dependencies, but you must make sure they all resolve to the same version.</li>
<li>In-browser template compilation:</li>
<li><strong><code>vue.runtime.esm-bundler.js</code> (default)</strong> is runtime only, and requires all templates to be pre-compiled. This is the default entry for bundlers (via <code>module</code> field in <code>package.json</code>) because when using a bundler templates are typically pre-compiled (e.g. in <code>*.vue</code> files).</li>
<li><strong><code>vue.esm-bundler.js</code></strong>: includes the runtime compiler. Use this if you are using a bundler but still want runtime template compilation (e.g. in-DOM templates or templates via inline JavaScript strings). You will need to configure your bundler to alias <code>vue</code> to this file.</li>
</ul>

<p>#### Bundler Build Feature Flags</p>

<p><a href="https://vuejs.org/api/compile-time-flags.html">Detailed Reference on vuejs.org</a></p>

<p><code>esm-bundler</code> builds of Vue expose global feature flags that can be overwritten at compile time:</p>

<ul>
<li><code>VUE_OPTIONS_API</code></li>
</ul>

<ul>
<li>Default: <code>true</code></li>
<li>Enable / disable Options API support</li>
</ul>

<ul>
<li><code>VUE_PROD_DEVTOOLS</code></li>
</ul>

<ul>
<li>Default: <code>false</code></li>
<li>Enable / disable devtools support in production</li>
</ul>

<ul>
<li><code>VUE_PROD_HYDRATION_MISMATCH_DETAILS</code></li>
<li>Default: <code>false</code></li>
<li>Enable / disable detailed warnings for hydration mismatches in production</li>
</ul>

<p>The build will work without configuring these flags, however it is <strong>strongly recommended</strong> to properly configure them in order to get proper tree-shaking in the final bundle.</p>

<h4>For Server-Side Rendering</h4>

<ul>
<li><strong><code>vue.cjs(.prod).js</code></strong>:</li>
<li>For use in Node.js server-side rendering via `requi</li>
</ul>

<hr>
<p>各位师傅觉得这个方案怎么样？有更好的做法吗？</p>