【前端工程化学习-创建项目】1-3 开发一款脚手架(yeoman)

06
六月
2021

不同的Generator生成不同的项目,那我们也可以定义自己的Generator生成自己需要的项目,特别是当你一部分基础代码或业务代码还是重复的时候,可以在别的脚手架形成的项目结构之上再封装,加入自己的代码,形成新的脚手架,将公共的部分全部放到脚手架中生成

一、Generator文件结构

创建Generator模块,实质上就是创建一个npm模块,但是Generator它有特定结构:

        |- generators   // 生成器目录

            |-app       // 默认生成器目录

                |-index.js // 默认生成器实现

            |-otherSub       // 其他的子集生成器目录

                |-index.js // 其他生成器实现

        |-package.json  // 模块包配置文件

二、generator的名称格式

yeoman的generator的名称必须是<generator>-name

三、generator实现

yoeman生成器的开发过程*

// 1 cmd命令中 创建文件夹 作为生成器文件的目录 mkdir gegerator-simpleVue

// 2 cd generator-simpleVue

// 3 yarn init 或 npm init 初始化文件目录

// 4 yarn add yeoman-generator // 这个模块中提供了生成器的基类,让我们在创建生成器的时候更加便捷

// 5 按照项目结构要求创建目录

// app下的index.js 作为Generator的核心入口,需要导出一个继承自Yeoman Generator的类型,Yeoman Generator在工作时会自动调用我们在此类型中定义的一些生命周期方法,我们可以在这个文件中通过调用父类提供的工具方法实现一些功能,例如文件写入

const Generator = require('yeoman-generator');

module.exports = class extends Generator {

    prompting() {

        return this.prompt([

            {

                type: 'input',

                name: 'name',

                message: 'Your project Name:',

                default: this.appname

            }

        ]).then(answers => this.answers = answers)

    }

    writing() {

        // 把每个文件都通过模板转换到目标路径

        const templates = [

            'README.md',

            'index.html',

            'src/App.vue',

            'src/main.js',

            'src/router/index.js',

            'src/assets/logo.png',

            'src/components/HelloWorld.vue',

            'config/dev.env.js',

            'build/build.js',

            'build/logo.png'

          ]

          templates.forEach(item => {

            //   item 每个文件路径

            // 当前案例:templates放在app文件夹下,跟当前index.js在同一级

            // 当前案例:destinationPath跟generators同一级,在根目录文件夹generator-vueCreate下面

            this.fs.copyTpl(

                this.templatePath(item),

                this.destinationPath(item),

                this.answers

            )

          })

    }

}

// 生成器完成后,yarn link或者npm lind到全局,yo 生成器的名字(generator-后面的部分)执行生成器

四、generator发布

    发布generator实质上就是发布npm模块,在要发布的generator目录下进行以下操作

        a: 将代码托管到github:

  •             创建文件.gitignore用于忽略node_modules目录  echo node_modules > .gitignore
  •             初始化本地仓库 git init
  •             git status 查看仓库状态
  •             git add .
  •             git commit -m 'inital'
  •             打开github创建一个新的仓库 同generator同名建议,复制远端仓库地址
  •             git remote add origin 远端仓库地址  // 仓库别名
  •             git push -u origin master

        b: 发布

  •             yarn publish

                - 提问部分:是否修改版本 输入用户密码

                - 如果用了淘宝镜像源,那么它是只读的会报错,可以用yarn publish --registry=https://registry.yarnpkg.com  这里用了yarn的镜像源举例,yarn的官方镜像同npm保持一致

                - npm官网就可以查到自己发布的模块了

                - 如果你希望在yeoman官方仓库发现的话,发布的时候添加yeoman-generator关键词即可(建议 好的才发布)

TAG

网友评论

共有访客发表了评论
请登录后再发布评论,和谐社会,请文明发言,谢谢合作! 立即登录 注册会员