Browserify：使用module.exports和本地文件

编程问答 2022-06-07

问题描述

我对Node还是很陌生，我不会说谎，我也不是最好的编码器，因此，如果我的代码明显有问题或者一开始很难遵循，我向高级致歉。

我需要一些帮助来了解module.exports的工作方式以及它们如何与browserify结合使用。

我有3个要从files.js导出的数组，这些数组是base64编码的html，已从我项目的目录中的文件中读取。如果我在控制台上登录这些模块（即module.exports.logos），它们似乎都可以打印出我期望的样子。

files.js 

const path = require('path');
const fs = require('fs');
const componentFolder = './express/contentSections/componentModules/';
const layoutFolder = './express/contentSections/layoutModules/';
const modulesPath = '/contentSections/'
const logoFolder = './express/images/logos/'
const componentModules = [];
const layoutModules = [];
const logos = []

var logoFiles = new Promise((resolve,reject) => {
  fs.readdir(logoFolder,(err,files) => {
      files.forEach((file,index,array) => {
        let logoPath = '/images/logos/' + file
        let contentHTML = `<div class="logo"><img class="logoImg" src="${logoPath}"></div>`
        let buff = Buffer.from(contentHTML);
        let b64Content = buff.toString('base64')
        logos.push(b64Content)

        if (index === array.length -1) resolve();
      });
    })
})

var compProm = new Promise((resolve,reject) => {
  fs.readdir(componentFolder,files) => {
    files.forEach((file,array) => {
      let filePath = componentFolder + file
      let content = fs.readFileSync(filePath).toString()
      let nameReplaceExt = path.parse(file).name
      let nameReplaceUnderscore = nameReplaceExt.replace(/_/g,' ')
      let nameAddSpacing = nameReplaceUnderscore.replace(/([A-Z])/g,' $1')
      let nameCapitalise = nameAddSpacing.replace(/(^\w|\s\w)/g,m => m.toupperCase())
      let moduleName = nameCapitalise
      let contentHTML = `<div><h3>${moduleName}</h3><div>${content}</div></div>`
      let buff = Buffer.from(contentHTML);
      let b64Content = buff.toString('base64')
      componentModules.push(b64Content)
      if (index === array.length -1) resolve();

    });
  })
})

var layoutProm = new Promise((resolve,reject) => {
  let b64Content
  fs.readdir(layoutFolder,array) => {
      let filePath = layoutFolder + file
      let content = fs.readFileSync(filePath).toString()
      let nameReplaceExt = path.parse(file).name
      let nameReplaceUnderscore = nameReplaceExt.replace(/_/g,m => m.toupperCase())
      let moduleName = nameCapitalise
      let contentHTML = `<div><h3>${moduleName}</h3><div>${content}</div></div>`
      let buff = Buffer.from(contentHTML);
      b64Content = buff.toString('base64')
      layoutModules.push(b64Content)
      if (index === array.length -1) resolve();
});
  })
})

module.exports.logos = logos
module.exports.componentModules = componentModules
module.exports.layoutModules = layoutModules

然后，我想在浏览器侧的JS文件中使用这些数组，因为我的意图是遍历这些数组，并将解码后的HTML附加在需要的地方。因此，我有fileLoad.js。如果我从终端运行fileLoad.js，它会按预期运行（现在仅打印我的数组）

fileLoad.js 

const fileLoad = require('./files');

setTimeout(function(){
console.log(fileLoad.logos)
console.log(fileLoad.componentModules)
console.log(fileLoad.layoutModules)
},1000)

但是，我相信我需要使用browserify来允许在浏览器而不是服务器端支持此文件，这就是我遇到的问题。我尝试运行一些不同的命令，只是无法弄清楚如何使其工作。

我找到的标准命令是

browserify express/js/fileLoad.js -o express/js/fileLoadBundle.js

将对象打印为空，并且出现fs.readdir不是函数的错误。现在，我明白了为什么readdir不是一个函数，因为它试图在浏览器中运行服务器端函数，但是现在我不知道如何继续以解决我遇到的问题。>

我尝试安装brfs并以这种方式处理文件，但是结果相同。

任何人都可以支持吗？

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

browserifybrowserifybrowserifyjavascriptnode-modules