nodejs遍历文件、重命名并写入新的文件

项目场景：

• 项目某功能类似发送表情包，下载UI给切的图全部都是中文命名，因此需要统一修改，但表情包太多，使用node.js写个脚本将所有emoji图片重命名并组成一个对象数组，方便页面调用

---

node.js写脚本：

• emoji这个文件夹是放在public下的
• emoji.js是放在utils下的，所以找到需要遍历的文件夹
• 首先遍历emoji文件夹，组成数组对象，对所有emoji图片进行重命名，之后将生成的数据写入list.js中
• node.js相关知识可去官网查看

const fs = require('fs')
const path = require('path')
var uuid = require('uuid')
const currentDirPath = '../../public/emoji'

function emojiInfos() {
  let emojiList = []
  fs.readdirSync(currentDirPath).forEach(function(name) {
    var oldPath = path.join(currentDirPath, name)
    var chineseName = name.split('.')[0]
    const unicode = uuid()
    var newPath = path.join(currentDirPath, unicode + '.png')

    emojiList.push({
      unicode: unicode,
      url: 'emoji/' + unicode + '.png',
      chineseName: chineseName
    })
    fs.rename(oldPath, newPath, err => {
      if (err) {
        console.log(err)
      }
    })
  })
  fs.writeFile(
    currentDirPath + '/list.js',
    JSON.stringify(emojiList),
    {},
    function(err) {
      if (err) {
        throw err
      }
    }
  )
}
emojiInfos()

• 在utils文件下，命令行执行下面命令即可在public/emoji里看到效果

node emoji.js

• 使用list.js，我是将生成的list中的数据放在了和该vue页面一起的位置
• 将数据暴露出去，页面可使用
  
• vue页面引入并使用

import emojiList from './emojiList'
data() {
    return {
      emojiMap: emojiList,
      visible: false
    }
  },

• 如果是需要获取到需要发送的emoji时，获取图片

<li
        class="emoji-item"
        v-for="item in emojiMap"
        :key="item.unicode"
        :data-code="item.unicode"
        @click.prevent="sendEmoji(item)"
        @mousedown.prevent
      >
</li>
 sendEmoji(item) {
 //需要的参数
      url: item.url,
      thumbUrl: item.url,
      name: item.unicode + `.png`
 }
 
如果是单个图片，想获取图片可以使用ref获取
<img src="xxx.png" alt style="width: 30px; height: 30px"
ref="emojiImage"/>

let content = this.$refs.emojiImage.src //可以获取到

---

问题分析：

• 最开始想使用require图片，然后用img:src来链接图片，首先拼接路径的时候require成了字符串不好操作，再然后每次都是require图片，性能不好，会很慢
• 将图片放在public路径下，打包时不会打包，引入时src会自动去public下面找文件，一开始写的public/emoji报错了，只要写图片在public下的文件路径就可以（url: ‘emoji/’ + unicode + ‘.png’），
• 如果想看oldPath和newPath是否为自己想要的结果，可以先降重命名和写入文件注释掉，直接console.log变量，然后node执行就可以看到

---

展示：

• 原始图片
  
• 重命名图片
  
• 效果图（有点可爱，哈哈哈哈）
  
  以上~~~