export default { install(Vue) { // Vue.component('组件对象', 组件对象) Vue.component(Public.name, Public) } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 在main.js 中 // Components 为上面在 index.js 文件中默认导出的对象 import Components from './components/index.js' Vue.use(Components) /...
最近在研究 vite 的源码,发现 vite 支持裸导入 node_modules 里的包。实现的原理是也很简单,在开发阶段,通过重写 import 语句,将裸导入转换为正确的导入。构建阶段,使用 rollup 打包依赖。下面我会模仿 vite 的实现,让浏览器支持裸导入。 创建测试用例 首先创建一个测试用例,通过 marked 这个第三方工具将 md 的...
component: () => import('@/components/HelloWorld2.vue'),改为 component: () => import('/@/components/HelloWorld2.vue'),如果没有这个/@则调用的位置会自动从@node_module里去查找目录,导致路径始终获取失败。 创建路由 文件目录配置好之后我们就可以创建路由 安装路由: yarn add vue-router@next // ...
import_from'loadsh'import__vite__cjsImport0_loadshfrom"/node_modules/.vite/deps/loadsh.js?v=84bfc546";//路径补全 找寻依赖的过程是自当前目录依次向上查找的过程,指导搜寻到根目录或者搜寻到对应依赖为止。 依赖预构建:首先vite会找到对应的依赖,然后调用esbuild(用go写的,对JS语法进行处理的库),将其他规...
import{ createApp }from'/@modules/vue.js'importAppfrom'/src/App.vue'import'/src/index.css?import'createApp(App).mount('#app') createApp 是 Vue3 新提供的 api 不难理解。重点是路径被拦截重写了,特别是'vue'加了一个/@modules/的前缀。对于引用 node_modules 模块的路径,vite 都进行替换,增加了...
node-modules-polyfillimport{NodeModulesPolyfillPlugin}from'@esbuild-plugins/node-modules-polyfill'// You don't need to add this to deps, it's included by @esbuild-plugins/node-modules-polyfillimportrollupNodePolyFillfrom'rollup-plugin-node-polyfills'// https://vitejs.dev/config/exportdefault...
可以看到,dev对应的命令直接就是vite,然后我们再找到node_modules下面的vite下面的bin文件夹下面的vite.js文件,这就是vite运行的入口文件。 这里有一个start方法,从这打上断点开始慢慢往下走,就能够知道整个运行的基本原理 从上面我们知道,vite首先是会启动一个本地服务,基于该服务对文件的请求进行处理返回 接着往下...
主要涉及如何兼容process变量，如何处理 node-sass 与 dart-sass冲突，以及路径别名的兼容处理等。通过这...
因此可以看到一个 Vue 模块会有两个 ModuleNode 以下是 App.vue 编译后的代码(有节选): // 删除了修改了一些代码,更能关注核心内容,这样更好理解// 引用的是依赖预构建后的 Vue 代码import {defineComponent as _defineComponent} from "/node_modules/.vite/deps/vue.js?v=59dd26a1";import "/src/App....
vite会拦截import,对于相对地址的文件,浏览器可以直接加载,但是对于像import { createApp } from 'vue'这种加载一个裸模块,vite就会通过一次预打包,将第三方模块放在node_modules/.vite,然后将裸模块地址替换成相对地址。以及加载的是vue文件浏览器无法解析,vite也是需要将vue文件转化成js文件。