前端工程化构造简单的微信小程序开发脚手架工具

最新推荐文章于 2024-04-17 16:10:04 发布

原创

最新推荐文章于 2024-04-17 16:10:04 发布 · 918 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一个自动生成微信小程序开发文件的npm包，使用yeoman和plop实现项目初始化和重复文件生成，包括询问用户项目名、APPID等，并根据用户需求启用plop工具。

这篇博客要说的脚手架工具我以前发布到npm上了，是generator-wxfile的1.1.1版本，后面可能还会继续有版本更新，所以要测试功能的话要下载对应的版本
对最新的版本有什么意见的话欢迎在评论中提出(σ′▽‵)′▽‵)σ

基本功能

在我的另一篇文章前端工程化发布一个自动生成微信开发文件的npm包中，我使用yeoman实现了重复文件的生成，而在这里我使用plop来实现这个功能，使用yeoman来将一开始的文件拉到本地，要完成的有以下几个功能

询问用户构建的项目名，默认为文件夹名，写入project.config.json文件中
询问用户构建时使用的APPID，这里的APPID只是写入project.config.json文件
询问用户构建项目时默认的页面的文件名，构建相应的文件夹和文件，在app.json中写入相应的路由
询问用户是否启用plop来快速构建重复文件，是的话就将plopfile.js和模板文件加入到项目中
通过plop工具将重复文件写入pages文件夹中，在app.json中写入相应的路由

文件目录

基本的文件目录和前端工程化发布一个自动生成微信开发文件的npm包文章中的文件目录一样，只是模板文件有些不同，修改了index.js文件的内容，这里plop-temp和tempPage里面的文件一样，除了替换文本的语法不同，tempPage文件中的替换文本是使用yeoman写入的，所以是使用ejs语法，采用<%= prop%>的语法，而在plop-temp文件夹中的文件是在采用plop工具的时候使用的模板工具，使用{ {prop}}的语法来代替
在这里插入图片描述
这里templates的文件基本上是我使用微信开发者工具简单初始化后拿过来做为初始化文件模板的，也可以直接去我的github上把文件拉下来看看

yeoman实现初始化过程

询问用户

上面说到了，我要实现向用户询问的功能，这里可以使用inquire这个npm包，但是因为yeoman里面已经有这个功能了，所以我就直接使用yeoman-generator的prompt方法了

首先要引入yeoman-generator包，导出一个类，在prompting方法中调用this.prompt方法，代码如下

const Generator = require("yeoman-generator")

module.exports = class extends Generator{
   
   
    prompting(){
   
   
        return this.prompt([{
   
    // 询问用户要创建的项目名称
            type:"input",
            name:"projectName",
            message:"your project name is",
            default:this.appname // 项目所在文件夹的名称
        },{
   
    // 询问用户的appID是多少
            type:"input",
            name:"appID",
            message:"your appID is"
        },{
   
    // 询问用户初始化的第一个页面名称是什么
            type:"input",
            name:"pageName",
            message:"the initialized page name is",
            default:"index" // 默认创建index页面
        },{
   
    // 询问用户是否使用plop工具
            type:"confirm",
            name:"isPlop",
            message:"do you use plop",
            default