开发小程序每次新建一个组件都需要新建多个文件,所以写了一个脚本可以快速创建文件夹和文件
1、创建scripts文件夹,新建一个template.js文件
2、template.js
const fs = require('fs')
const dirName = process.argv[2] // 获取文件夹名字
const capPirName = dirName.substring(0, 1).toUpperCase() + dirName.substring(1) // 首字母转大写
if (!dirName) {
console.log('文件夹名称不能为空!')
console.log('示例:npm run tep test')
process.exit(0)
}
// wxml页面模板
const indexTep = `
<view class="${capPirName}">
${capPirName}
</view>
`
// sass文件模版
const sassTep = `
.${dirName} {
}
`
// wxss文件模版
const wxssTep = `
.${dirName} {
}
`
// json文件模版
const jsonTep = `
{
"component": true,
"navigationBarTitleText": "${dirName}"
}
`
// js文件模版
const jsTep = `Component({
data: {},
methods: {
onShow() {
console.log('${dirName}')
},
},
})
`
fs.mkdirSync(`./miniprogram/pages/${dirName}`) // 创建文件夹
process.chdir(`./miniprogram/pages/${dirName}`) // cd进文件夹
fs.writeFileSync(`${dirName}.wxml`, indexTep) // wxml
fs.writeFileSync(`${dirName}.scss`, sassTep) // sass
fs.writeFileSync(`${dirName}.wxss`, wxssTep) // sass
fs.writeFileSync(`${dirName}.json`, jsonTep) // json
fs.writeFileSync(`${dirName}.js`, jsTep) // js
process.exit(0) // 终止进程
3、package.json
"scripts": {
"sass": "gulp",
"tep": "node miniprogram/scripts/template"
},