js import和exports

  • Z时代
  • 2024-02-21
  • 分类：IT

js import和exports,
目的: 想要引入并导出ComAddItem下所有子目录下的index.vue文件。
目前：下面?放了目前的我能想到的两种写法。
问题：xdm，有没有更加优秀的写法或者配置能够可以统一引入导出ComAddItem下所有子目录下的index.vue文件。

// 方法1
export { default as ComAddItemComInfo } from './ComAddItemComInfo/index.vue'
export { default as ComAddItemComPod } from './ComAddItemComPod/index.vue'
export { default as ComAddItemComServer } from './ComAddItemComServer/index.vue'
export { default as ComAddItemComSetting } from './ComAddItemComSetting/index.vue'
export { default as ComAddItemThirdInfo } from './ComAddItemThirdInfo/index.vue'
export { default as ComAddItemThirdServer } from './ComAddItemThirdServer/index.vue'
export { default as ComAddItemVersionInfo } from './ComAddItemVersionInfo/index.vue'
export { default as ComAddItemVersionLimit } from './ComAddItemVersionLimit/index.vue'
// 方法2
// import ComAddItemComInfo from './ComAddItemComInfo/index.vue'
// import ComAddItemComPod from './ComAddItemComPod/index.vue'
// import ComAddItemComServer from './ComAddItemComServer/index.vue'
// import ComAddItemComSetting from './ComAddItemComSetting/index.vue'
// import ComAddItemThirdInfo from './ComAddItemThirdInfo/index.vue'
// import ComAddItemThirdServer from './ComAddItemThirdServer/index.vue'
// import ComAddItemVersionInfo from './ComAddItemVersionInfo/index.vue'
// import ComAddItemVersionLimit from './ComAddItemVersionLimit/index.vue'
// export {
//   ComAddItemComInfo,
//   ComAddItemComPod,
//   ComAddItemComServer,
//   ComAddItemComSetting,
//   ComAddItemThirdInfo,
//   ComAddItemThirdServer,
//   ComAddItemVersionInfo,
//   ComAddItemVersionLimit
// }

回答：

如果是用的 webpack的话，可以用这个context-module-api

回答：

抛转引玉，使用nodejs相关能力以及webpack配置可以简单优雅的解决这个问题

// 筛选所有符合要求的入口文件
const path = require("path");
const fs = require("fs");
function dealPluginFileForPaths(publicPluginPath) {
    let fileArr = [];
    let existPath = fs.existsSync(publicPluginPath); //是否存在目录
    if (existPath) {
        let readdirSync = fs.readdirSync(publicPluginPath); //获取目录下所有文件
        readdirSync.map(item => {
            let currentPath = publicPluginPath + "/" + item;
            let isDirector = fs.statSync(currentPath).isDirectory(); //判断是不是一个文件夹
            if (isDirector) {
                // 这里默认目录中都是入口文件
                fileArr.push({
                    key: item
                });
            }
        });
        return fileArr;
    }
}
// webpack中
new webpack.DefinePlugin({
    "process.env.ALL_XXX": JSON.stringify(
         dealPluginFileForPaths(
             path.resolve(__dirname, "./src/ComAddItem")
         )
    )
})

之后不管是vue还是react,动态import即可，视情况是否加入热更新流程

以上是 js import和exports 的全部内容， 来源链接： utcz.com/p/936066.html

回到顶部