自动写element-ui按需导入代码

因为组件库按需导入一个一个太麻烦，自己又不想全部导入，所以做了一个自动写按需导入导入代码的小东西 效果图：

安装node后用node运行复制的这段代码

代码

const fs = require('fs')
function getCompentName(PATH) {//获取单目录下所有用到的组件名字
  let ready_arry = fs.readdirSync(PATH)
  //   let folders_arry = ready_arry.filter(name => name.indexOf('.') == -1)//文件夹名字数组，以后做多级文件夹检测😊
  let files_arry = ready_arry.filter(name => name.indexOf('.') !== -1)
  return files_arry.map(value => {
    let item = fs.readFileSync(PATH + '/' + value, 'utf8')
    let reg = /(<el-[a-z]+(-[a-z]+)?)/gim
    let arry = item.match(reg)
    if (arry !== null) {
      let result = arry.filter(name => name.indexOf('__') === -1)
      result = result.filter((v, i, a) => {
        return a.indexOf(v) === i
      })
      return result.map(v => {
        return v.replace('<el-', '')
      })
    }
  })
}

function writeCode(arry, PATH, name) {
  let a = []
  arry.forEach(value => {
    if (value != undefined) {
      a = a.concat(value)
    }
  })
  let start = 'import vue from "vue"'
  start += ';'
  start += 'import {'
  a.forEach(value => {
    if (value.indexOf('-') === -1) {
      start += value[0].toUpperCase() + value.substring(1, value.length)
      start += ','
    } else {
      let i = value.indexOf('-') + 1 //value.indexOf('-')-1
      start +=
        value[0].toUpperCase() +
        value.substring(1, value.indexOf('-')) +
        value[i].toUpperCase() +
        value.substring(i + 1, value.length)
      start += ','
    }
  })
  start += '} from "element-ui"'
  start += ';'
  start += 'export default () => {'
  a.forEach(value => {
    if (value.indexOf('-') === -1) {
      start += 'vue.use(' + value[0].toUpperCase() + value.substring(1, value.length) + ')'
      start += ';'
    } else {
      let i = value.indexOf('-') + 1 //value.indexOf('-')-1
      start +=
        'vue.use(' +
        value[0].toUpperCase() +
        value.substring(1, value.indexOf('-')) +
        value[i].toUpperCase() +
        value.substring(i + 1, value.length) +
        ')'
      start += ';'
    }
  })
  start += '}'
  fs.writeFileSync(PATH + 'index' + '.' + 'js', start)
  let css_w = ''
  a.forEach(value => {
    if (value.indexOf('-') === -1) {
      css_w += 'import ' + value + ' from' + ' "element-ui/lib/theme-chalk/' + value + '.css"'
      css_w += '\n'
    } else {
      let i = value.indexOf('-') + 1
      css_w +=
        'import ' +
        value.substring(0, value.indexOf('-')) +
        value[i].toUpperCase() +
        value.substring(i + 1, value.length) +
        ' from ' +
        '"element-ui/lib/theme-chalk/' +
        value +
        '.css"'
      css_w += '\n'
    }
  })
  css_w += '\nexport default {'
  a.forEach(value => {
    if (value.indexOf('-') === -1) {
      css_w += value
      css_w += ','
    } else {
      let i = value.indexOf('-') + 1
      css_w +=
        value.substring(0, value.indexOf('-')) +
        value[i].toUpperCase() +
        value.substring(i + 1, value.length)
      css_w += ','
    }
  })
  css_w += '}'
  fs.writeFileSync(PATH + 'css' + '.' + 'js', css_w)
}
//修改下面就可以了（代码冗余以后优化😊）
writeCode(getCompentName('./views'), './')//第一个参数组件名字的二维数组，第二个参数路径

生成代码后： 在Vue项目的main.js添加如下代码

import el_install from './ElementUi/index'//这里填生成代码index的导入路径
el_install()
import * as el_css from './ElementUi/css'//导入所有样式到项目，别名随便起一个