开发的时候，比如在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
