Vuex 4 安装与构建指南从 CDN、npm/yarn 到源码构建并解析 dist 产物机制【免费下载链接】vuex️ Centralized State Management for Vue.js.项目地址: https://gitcode.com/gh_mirrors/vu/vuex本文基于 Vuex 官方日文安装文档docs/ja/installation.md展开完整覆盖 Vuex 的三种安装方式——CDN 直接引入、npm/Yarn 包管理安装、以及从源码克隆构建开发版并结合当前仓库的 package.json、rollup.config.js 与 src/index.js 等文件深入解析每种安装方式背后对应的构建产物、模块解析规则与版本管理机制帮助你在任何项目环境中正确接入 Vuex 并理解其分发包结构。前置条件Vuex 4 面向 Vue 3在开始安装之前需要明确版本约束。当前仓库的 package.json 中声明了peerDependencies: { vue: ^3.2.0 }, dependencies: { vue/devtools-api: ^6.4.4 }这包含两层含义Vuex 4 仅适用于 Vue 3^3.2.0及以上。如果你仍在使用 Vue 2应使用 Vuex 3.x而不是按本文安装 Vuex 4Vuex 依赖vue/devtools-api用于 Vue Devtools 集成该依赖由 npm/yarn 自动安装无需手动处理。当前仓库版本为4.1.0见 package.json 的version字段。方式一直接下载 / CDN 引入CDN 地址日文文档给出的 CDN 入口为 https://unpkg.com/vuex4该链接始终指向 NPM 上的最新 4.x 发布版本Unpkg.com 提供基于 NPM 包的 CDN 服务如需锁定特定版本/标签可以使用形如https://unpkg.com/vuex4.0.0/dist/vuex.global.js的 URL通过版本号直接指定具体文件。这个指定dist/vuex.global.js并非随意写法。在 package.json 中可以看到unpkg: dist/vuex.global.js, jsdelivr: dist/vuex.global.js即unpkg与jsdelivr字段都显式指向全局构建产物dist/vuex.global.js因此 CDN 场景下应使用 IIFE全局构建而不是 ESM 构建。HTML 引入方式按文档要求必须在 Vue 之后引入vuexscript src/path/to/vue.js/script script src/path/to/vuex.js/script为什么顺序不能颠倒查看 rollup.config.js 可以发现所有构建都把vue声明为 external并指定全局映射external: [vue], // ... output: { globals: { vue: Vue } }也就是说全局构建IIFE产物在运行时会直接引用浏览器全局变量Vue。Vue 脚本未先加载Vue未定义Vuex 就会立即报错。加载成功后页面会得到一个全局对象Vuexrollup.config.js中c.output.name Vuex随后可直接使用Vuex.createStore(...)创建 Store。开发版与生产版全局构建CDN/下载场景下有两个可用的全局产物文件用途构建配置dist/vuex.global.js开发版保留完整错误断言format: iife,env: developmentdist/vuex.global.prod.js生产版经 terser 压缩format: iife,minify: true,env: production两者的区别来自 rollup.config.js 中的replace插件replace({ __VERSION__: pkg.version, __DEV__: isBundlerBuild ? (process.env.NODE_ENV ! production) : config.env ! production, __VUE_PROD_DEVTOOLS__: isBundlerESMBuild ? __VUE_PROD_DEVTOOLS__ : false })__DEV__在非 production 环境中被替换为true此时 src/store.js 中的开发断言如检查 Promise polyfill、new调用、未知 mutation 报错提示等才会生效production 构建中这些断言代码路径不激活产物更小、运行更快。生产环境部署时建议锁定具体版本并使用vuex.global.prod.js。方式二NPM 安装文档给出的安装命令为npm install vuexnext --save关于这条命令有两点值得结合仓库说明--save在 npm 5 中是默认行为现代 npm 环境下写不写均可next表示安装next标签下的版本而不是latest稳定标签。这一点可以从发布脚本 scripts/release.js 得到印证——发布时维护者会在两个标签中二选一const tags [ latest, next ]发布脚本在确认版本号后会执行yarn publish --tag tag。因此vuexnext安装到的是下一个大版本的预发布/候选版本在追求稳定的生产项目中直接npm install vuex --save安装latest标签的 4.x 稳定版更为稳妥。next适合尝鲜新特性并愿意跟进 breaking change 的场景。npm 究竟会解析到哪个文件安装 Vuex 后构建工具按 package.json 的字段与exports映射选择产物main: dist/vuex.cjs.js, exports: { .: { module: ./dist/vuex.esm-bundler.js, require: ./dist/vuex.cjs.js, import: ./dist/vuex.mjs }, ./*: ./*, ./: ./ }, module: dist/vuex.esm-bundler.js, browser: dist/vuex.esm-browser.js, typings: types/index.d.ts, sideEffects: false对应关系为字段产物适用场景exports.importdist/vuex.mjsNode 端 ESM 导入.mjsexports.require/maindist/vuex.cjs.jsCommonJSrequireexports.module/moduledist/vuex.esm-bundler.jsWebpack、Vite、Rollup 等打包器browserdist/vuex.esm-browser.js浏览器原生 ESM不经打包typingstypes/index.d.tsTypeScript 类型声明两点实用细节bundler 构建的__DEV__被替换为运行时表达式(process.env.NODE_ENV ! production)见 rollup.config.js意味着同一份vuex.esm-bundler.js既能提供开发期报错又能在NODE_ENVproduction下关闭断言无需切换文件sideEffects: false声明使打包器的 tree-shaking 可以放心移除未使用的导出如只用了createStore就不必携带createLogger等辅助函数。安装后的标准用法对应 src/index.js 的导出清单import { createStore } from vuex import { createApp } from vue const store createStore({ state: () ({ count: 0 }), mutations: { increment (state) { state.count } } }) createApp(App).use(store)src/index.js导出的 API 面包括version、Store、storeKey、createStore、useStore、mapState、mapMutations、mapGetters、mapActions、createNamespacedHelpers、createLogger其中默认导出是一个包含version: __VERSION__的对象构建时被替换为真实版本号。安装完成后可以通过import Vuex from vuex; console.log(Vuex.version)验证实际装入的版本。Vue 2 项目的类型入口仓库还保留了 types/vue.d.ts 等声明文件。如果你需要查阅 Options API 下的$store、mapState等类型定义可直接阅读types/目录。方式三Yarn 安装文档给出的 Yarn 命令yarn add vuexnext --save语义与 NPM 方式完全一致next对应发布脚本 scripts/release.js 中的next标签--save同样会写入package.json的dependencies。与 npm 相同的建议适用——生产项目优先使用yarn add vuex --save安装latest标签的稳定版本。由于 Vuex 的模块解析规则上一节的 exports 表与包管理器无关npm 与 yarn 安装后行为完全一致。方式四开发版构建从源码构建文档指出如果想使用最新的开发版构建需要从 Git 仓库直接克隆并自行构建git clone https://gitcode.com/gh_mirrors/vu/vuex.git node_modules/vuex cd node_modules/vuex yarn yarn build这条流程把源码仓库直接克隆到node_modules/vuex使项目import vuex时解析到的就是刚构建出的dist/产物从而绕过 NPM 上已发布的版本。yarn build实际做了什么package.json 中build脚本定义为build: node scripts/build.jsscripts/build.js 驱动 rollup.config.js 定义的构建矩阵共产出6 份产物产物文件格式环境说明dist/vuex.esm-browser.jsESdevelopment浏览器原生 ESMdevdist/vuex.esm-browser.prod.jsESproduction浏览器原生 ESMproddist/vuex.esm-bundler.jsESdevelopment供打包器使用exports.moduledist/vuex.global.jsIIFEdevelopment全局构建窗口变量Vuexdist/vuex.global.prod.jsIIFEproduction全局构建 terser 压缩dist/vuex.cjs.jsCJSdevelopmentCommonJSexports.require / main几个值得注意的实现细节入口文件有差异ES 构建以 src/index.js 为输入额外导出createNamespacedHelpers而 IIFE/CJS 全局构建以 src/index.cjs.js 为输入非全局构建会将vue/devtools-api也标记为 external全局构建中该依赖会被打包进去保证 CDN 单文件可用if (!isGlobalBuild) { c.external.push(vue/devtools-api) }所有构建都经过rollup/plugin-buble转译保留asyncAwait、forOf语法不降级以兼容更老的浏览器构建时文件头部会写入带版本号与 MIT 声明的 bannerconst banner /*! * vuex v${pkg.version} * (c) ${new Date().getFullYear()} Evan You * license MIT */因此开发版构建的核心价值是拿到Git 上最新提交对应的产物而 NPM 版本只到上一次发布为止。安装完成后的运行入口Store 如何注入应用无论用哪种方式安装最终都是同一个Store在起作用。安装完成后createApp(...).use(store)触发 src/store.js 中的install方法install (app, injectKey) { app.provide(injectKey || storeKey, this) app.config.globalProperties.$store this const useDevtools this._devtools ! undefined ? this._devtools : __DEV__ || __VUE_PROD_DEVTOOLS__ if (useDevtools) { addDevtools(app, this) } }这段代码解释了 Vuex 的两种访问机制如何同时成立app.provide(injectKey || storeKey, this)—— 为 Composition API 的useStore()定义于 src/injectKey.js提供依赖注入app.config.globalProperties.$store this—— 为 Options API 的this.$store提供全局属性Devtools 的接入与否由__DEV__/__VUE_PROD_DEVTOOLS__宏决定——这也正是上一节 CDN 开发版/生产版差异在运行时落地的地方dev 构建默认接入 Devtoolsprod 构建默认不接入。createStore本身只是Store类的工厂函数src/store.jsexport function createStore (options) { return new Store(options) }各方式速查与选型建议场景推荐方式命令/操作实际使用的产物浏览器无构建步骤如学习示例CDNVue 之后script引入dist/vuex.global.js全局变量Vuex生产环境无构建步骤CDN 锁定版本unpkg.com/vuex4.0.0/dist/vuex.global.prod.js等全局变量Vuex压缩Vue 3 项目 打包器npm / yarnnpm install vuex --save/yarn add vuex --savedist/vuex.esm-bundler.js尝鲜 next 标签npm / yarnnpm install vuexnext --save同上版本为 next 标签跟踪最新源码克隆构建git clone→yarn→yarn build本地dist/全部 6 份产物选型时记住两个硬约束Vuex 4 只配合 Vue 3^3.2.0使用CDN 引入时Vuex 必须放在 Vue 之后IIFE 构建依赖全局Vue。其余选择完全取决于项目是否存在打包工具链以及你需要的是已发布版本还是 Git 上的最新开发版。【免费下载链接】vuex️ Centralized State Management for Vue.js.项目地址: https://gitcode.com/gh_mirrors/vu/vuex创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考