node认识

AA哥
116 阅读2分钟

文件读写实战

场景

参考elementui的源码，你会发现别人的ui库的文件结构层次很明了，并且文件清除明了，基本一眼看过去就知道这个文件夹里面方的内容都是十分统一的。那他们如何做到多个文件夹下生成多种功能类型的文件的呢，答案就在build文件夹的bin文件夹下的new.js，原来是根据读取键入的组件名称然后就可以在多个文件夹下生成对应文件模板的文件。

简单复现

虽然只是使用node的简单的文件读写操作而已，但是很值得我们学习。因为这打开了我们以后对重复工作的一个新世界的大门。

点击查看代码 
/**
 * 自动生成组件一系列相关文件
 * 目标：键入node index1.js [组件名称]---然后可以在packages文件夹下：组件名称.js以及在target文件夹输出：组件名称.js
 */

const uppercamelcase = require('uppercamelcase');
const path = require('path')
const fs = require('fs')
const componentName = process.argv[2]//获取键入的参数，即输入的组件名称。process的argv第一个为node.js的绝对路径，第二个为当前执行文件的绝对路径，后面就是键入的参数
const ComponentName = uppercamelcase(componentName)


//输出文件的数组
const outputFiles = [
{
filepath: path.join(__dirname, './packages', ${componentName}.d.js),//__dirname就是当前改文件所在的文件夹的绝对路径
compoment: `important xxx from 'xxx'


        /* ${ComponentName} 组件文件  */
        function xxx(){
            console.log('${ComponentName}')
        }
    `
},
{
    filepath: path.join(__dirname, './target', `${componentName}.js`),
    //也可以使用文件读取的方式来读取模板---模板内容就是输出内容
    compoment: fs.readFileSync(path.resolve(__dirname,'./tempalte.js'))
}



]


/* 定义一个文件输出方法(方法1)----文件夹不存在也会自动生成
// const fileSave = require('file-save');


// function outPutFile(outputFileObj){
//     //参数为生成文件的绝对路径，write参数为写入文件的内容
//     fileSave(outputFileObj.filepath)
//         .write(outputFileObj.compoment, 'utf8')
//         .end('\n')//多一行换行区别而已
// }
*/


//原生方法-----需要使用自己使用fs.mkdir()先创建对应文件夹否则报错
function outPutFile(outputFileObj){
fs.writeFileSync(outputFileObj.filepath,outputFileObj.compoment)//带sync为同步操作，三参数可以指定编码格式，读写权限等
}


//遍历输出
outputFiles.forEach( item => {
outPutFile(item)
})

注意： + 注释的file-save为elemenetui使用，使用的时候需要安装`npm i file-save` + 驼峰的那个引入也需要进行安装`npm i uppercamelcase`

效果

我们在sh上输入：node ./index.js [组件名称],然后就可以在与index.js文件同级下生成两个文件夹（如果为第一次生成，即文件夹都没创建的时候）否则在对应文件夹下添加新文件，例如组件名称为，test。在packages文件夹下就会生成一个test.d.js文件，同时在target文件夹下生成test.js文件

扩展

需要在使用外部模板的方式传递变量，参考：

点击查看代码 
...
{
    filepath: path.join(__dirname, './target', `${componentName}.js`),
    //也可以使用文件读取的方式来读取模板---模板内容就是输出内容
    compoment: render(fs.readFileSync(path.resolve(__dirname,'./tempalte.js'),'utf8'),{ value: ComponentName })
}
...

//tempalte.js内容为
{{value}}//需要和参数名称对应上即可

avatar
文章
阅读
粉丝