关于文件导入：required.context 和 vite Glob 导入

最新推荐文章于 2024-06-20 10:03:30 发布

原创最新推荐文章于 2024-06-20 10:03:30 发布 · 979 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vite

javascript 同时被 2 个专栏收录

40 篇文章

订阅专栏

vue

16 篇文章

订阅专栏

本文对比了webpack和vite在导入模块时的不同方法。在webpack中，使用require.context动态导入所有.js文件，并通过遍历和替换来创建模块对象。而在vite中，借助import.meta.globEager静态加载所有模块文件。两种方式都在Vuex的store中导入并设置模块的namespaced属性。这种差异源于webpack的运行时打包和vite的预构建策略。

部署运行你感兴趣的模型镜像

webpack 和 vite 导入方式不同
比如在store的index.js中导入modules下的所有js文件

两者到底有什么不同，参考文章

webpack中

//导入模块文件

import { createStore } from 'vuex'
let files = require.context('./modules', false, /\.js$/),
modules = {};
files.keys().forEach((key) => {
    modules[key.replace(/\.\/|\.js/g, '')] = files(key).default
})
// 导入所有 vuex 模块，自动加入namespaced:true，用于解决vuex命名冲突
Object.keys(modules).forEach(key => {
    modules[key]['namespaced'] = true
})

export default createStore({
    modules
})

vite 中

//导入模块文件

import { createStore } from 'vuex'

let files = import.meta.globEager('./modules/*.js')
let modules = {}

for (const path in files) {
    modules[path.replace(/\.\/\modules\/|\.js/g, '')] = files[path].default
}


export default createStore({
    modules
})