npm包生成模板文件

开发的时候，比如在android mvp或者React Native里面基于Redux架构，在编写一个页面时经常会需要创建类似的固定几个文件，我们可以通过nodejs来协助我们完成模板文件的创建。

以下介绍这个npm 包项目的简单示例创建过程：

1：目录结构

image.png

2：package.json文件说明（该文件可通过命令npm init生成）：

`{`

`"name"``: ``"template-create-file"``,`

`"version"``: ``"1.0.0"``,`

`"description"``: ``"template file create"``,`

`"main"``: ``"index.js"``,`

`"scripts"``: {`

`"test"``: ``"echo \"Error: no test specified\" && exit 1"``,`

`"createFile"``: ``"node createFile.js"``,`

`"insertProps"``: ``"node insertProps.js"`

`},`

`"bin"``: {`

`"create-file"``: ``"createFile.js"``,`

`"insert-props"``: ``"insertProps.js"`

`},`

`"keywords"``: [],`

`"author"``: ``"leach chen"``,`

`"license"``: ``"ISC"``,`

`"publishConfig"``: {`

`"registry"``: ``"xxx发布的仓库地址"`

`}`

`}`

name：项目包名，如安装时 npm install template-create-file

version：版本，每次发布新包时需要提升版本号

main：指定项目入口文件

scripts：指定可以执行的脚本命令，调试时可以通过npm run test、npm run createFile、npm run insertProps方式执行指定文件。

bin：该配置比较重要，当你通过npm install -g template-create-file 安装该包后，就可以在命令行里通过create-file、insert-props全局执命令

image.png

publishConfig：指定要发布的仓库

3：创建模板文件代码（createFile.js）：

#!/usr/bin/env node
 
const fs = require('fs');
const path = require('path');
 
const args = process.argv.splice(2);
const componentName = args[0]; // 获取到组件名
const templateType = args[1] //模板类型
const filePath = args[2]; // 获取到文件存储路径
let root = process.cwd(); //获取当前路径
let replaceStr = "" //要全局替换的字符串
 
console.log(args)
run()
 
function run() {
    if(!componentName) //组件名称没有输入
    {
        showHelp()
        return
    }
    if(filePath)//如果自定义路径存在
    {
        root = filePath
    }
 
    if(args[0] == "help" || args[0] == "-help" || args[0] == "--help") {  //显示命令列表
        showHelp()
    }if(args[0] == "list") { //显示模板列表
        showTemplateList()
    }else{
        switch (templateType) {
            case "1":
                createTemplate1()
                break
            default:
                createTemplate1()
        }
    }
}
 
function createTemplate1() {
    replaceStr= "TemplateDemo"
    createFile("./Template/Template1/TemplateDemoPage.tsx")
    createFile("./Template/Template1/TemplateDemoView.tsx")
    createFile("./Template/Template1/TemplateDemoTypes.ts")
    createFile("./Template/Template1/TemplateDemoAction.ts")
    createFile("./Template/Template1/TemplateDemoReducer.ts")
}
 
function showHelp() {
    console.log("*****************************************************************************************");
    console.log(" you can use below command:");
    console.log(" 1. 'create-file help'");
    console.log(" 2. 'create-file list'，show contains template list");
    console.log(" 3. 'create-file ModuleName'，for example(react-create TestModule)");
    console.log(" 4. 'create-file ModuleName Type'，for example(react-create TestModule 1)，type value is 1,2,3...，you can use 'react-create list' show template list");
    console.log(" 5. 'create-file ModuleName Type FilePath'，for example(react-native TestModule 1 D:\\Prj\\TestProject)");
    console.log("*****************************************************************************************");
}
 
function showTemplateList() {
    console.log("*****************************************************************************************");
    console.log(" Template List:");
    console.log(" 1. TemplateDemoPage.tsx、TemplateDemoView.ts、TemplateDemoTypes.ts、TemplateDemoAction.ts、TemplateDemoReducer.ts");
    console.log("*****************************************************************************************");
}
 
function createFile(templatePath)
{
    // 读取模板文件，并修改内容
    let template = fs.readFileSync(path.join(__dirname, templatePath), 'utf8');
    //let content = template.replace(/TemplateDemo/g, componentName); // target file content
     let content = template.replace(new RegExp(replaceStr,'g'), componentName); // target file content
 
// 目标文件夹和目标文件的路径
    let hostPath = __dirname
    if(root.indexOf(":") > 0)
    {
        hostPath = ""
    }
    let targetDirPath = path.join(hostPath, root, componentName);
    let targetFilePath = path.join(hostPath, root, componentName, templatePath.split("/")[3].replace("TemplateDemo",componentName));
 
// mkdirSync
    if (!fs.existsSync(targetDirPath)) {
        fs.mkdirSync(targetDirPath);
        console.log('The ' + targetDirPath + ' folder has been created!');
    }
 
// writeFile async
    if (!fs.existsSync(targetFilePath)) {
        fs.writeFile(targetFilePath, content, (err) => {
            if (err) throw err;
            console.log('The ' + targetFilePath + ' has been created!');
        });
    } else {
        console.error('error!\n' + targetFilePath + ' has already been existed!');
    }
}

image.png

4：代码发布
可通过npm get registry 查看当前设置的包来源，返回的哪个地址就是往那个仓库上发布
1：执行命令：npm login 输入账号、密码、邮箱即可登录
2：执行命令：npm publish即可发布

代码
https://github.com/leach-chen/TemplateCreateFile

个人网站(github资源库)
https://www.leachchen.com