• wordpress CMS主题:ssmay主题 wordpress CMS主题:ssmay主题
  • 首页 > 前端开发 > 从零开始做Vue前端架构(9)

    从零开始做Vue前端架构(9)

    作者: 分类:前端开发 点击: 58 次
    wordpress CMS主题:ssmay主题

      扫描下面的二维码,“关注”我的头条号,我会每天更新免费视频课程。

      前言

      相信很多人都用过vue-clicreate-react-app或者类似的脚手架。
      脚手架方便我们复制,粘贴,或者clone代码库,而且还可以更具用户的选择,引入用户所需要的插件。
      脚手架往往搭配着早已设计好了架构的项目,然后按需进行拷贝。

      Yeoman

      介绍

      官网介绍: The web's scaffolding tool for modern webapps.

      yeoman是一款来做脚手架的工具,我们借助它,就能很容易地开发出自己的脚手架了。
      yeoman具体的使用,本文不会介绍太多,官网的文档差不多就够了,我也会在文章末尾放上自己搜集的一些参考资料,同学们自己看看就好了。

      安装

      安装yeoman: npm install -g yo

      generator

      generator其实就是一个node module,即npm。yeoman根据我们写的generator来执行我们写的构建代码。(对怎么自己选一个npm包不熟悉的同学,可以戳这里>>
      generator文件夹必须以generator-开头,然后之后跟上自定义的脚手架名字,比如generator-zx-vue,将它做成npm包以后,上传到npm官网,只有在电脑上全局安装,然后用yoman运行就好了,之后会详细介绍。

      创建自己的generator

      除了手动创建自己的generator项目,我们还可以通过别人已经做好的脚手架来创建。
      安装generator-generator: npm install -g generator-generator
      然后,运行脚手架: yo generator
      之后,我们就可以看到一系列的提示,按照提示输入完信息以后,我们就有了一份编写自己的generator的模板项目了。

      编写自己的generator

      其实,这个generator脚手架生成的很多文件我们都不需要管,我们只需要把注意力放在generator/app这个文件夹下的内容就好了。
      templates文件是用来作为仓库,我们在编写脚本的时候,如果需要哪些文件,就直接去这个仓库里copy出来就好了。

      划重点

      1. 问题

      因为我们自己做的generator是一个npm包,我们自然希望对其进行版本管理,用上git,方便今后的迭代。
      templates其实也是一个独立的项目,我们之前说了,它是一个早已完成了的项目架子,我们是从gitlab或者github上copy过来的而已。那该怎么管理这两个不同的项目呢?

      2. 解决-git子模块

      git用的6的同学肯定一下子就想到git子模块的知识了。
      不熟悉的同学可以戳 git文档-子模块>>

      因此,我们不是把项目copy进templates,也不是git clone进templates,而是先删除app文件夹下的templates,然后:
      git submodule add https://github.com/CodeLittlePrince/vue-construct-for-zx-vue.git templates
      这样的话,我们就可以更新自己的仓库项目(vue-construct-for-zx-vue),generator项目的话,pull子模块就好了。两者保持独立,方便迭代和维护。

      编写构建脚本

      接下来,我们就可以来编写app文件夹下的index.js文件了:

      const Generator = require('yeoman-generator')
      const chalk = require('chalk')
      const yosay = require('yosay')
      const path = require('path')
      const fs = require('fs')
      
      module.exports = class extends Generator {
        initializing() {
          // 打印欢迎语
          this.log(
            yosay(`Welcome to the shining ${chalk.cyan('generator-zx-vue')} generator!`)
          )
        }
        prompting() {
          // 让用户选择是否需要包含vuex
          const prompts = [
            {
              type: 'input',
              name: 'name',
              message: 'Name of project:',
              default: path.basename(process.cwd())
            },
            {
              type: 'input',
              name: 'description',
              message: 'Description:',
              default: '',
            },
            // {
            //   type: 'confirm',
            //   name: 'includeVuex',
            //   message: 'Would you like to include Vuex in your project?',
            //   default: false,
            // }
          ]
          return this.prompt(prompts).then(answers => {
            this.name = answers.name
            this.description = answers.description
            // this.includeVuex = answers.includeVuex
            this.log(chalk.green('name: ', this.name))
            this.log(chalk.green('description: ', this.description))
            // this.log(chalk.green('includeVuex: ', this.includeVuex))
          })
        }
      
        writing() {
          // 复制普通文件
          // https://github.com/sboudrias/mem-fs-editor
          this.fs.copyTpl(
            this.templatePath(),
            this.destinationPath(),
            {
              name: this.name
            },
            {},
            { globOptions:
              {
                dot: true
              }
            }
          )
          // 根据用户选择,决定是否安装vuex
          if (this.includeVuex) {
            const pkgJson = {
              name: this.name,
              description: this.description,
              // dependencies: {
              //   vuex: '^3.0.1'
              // }
            }
            // Extend or create package.json file in destination path
            this.fs.extendJSON(this.destinationPath('package.json'), pkgJson)
          }
        }
      
        install() {
          this.npmInstall()
        }
      
        end() {
          this.log(chalk.green('Construction completed!'))
        }
      }
      
      

      语法很简单,具体可以自己看yeoman官方文档,我简单的介绍一下几个比较常用的函数,或者说生命周期:

      函数名 我用来做什么
      initializing 我用来写一些欢迎语
      prompting 与用户的交互,比如input、checkbox、confirm等
      writing 拷贝和编辑文件
      install 安装依赖,如npm install
      end 写一些如goodbye的结束语

      本地测试是否有用

      没发布上线的npm包,本地测试只需要link一下就好了,到generator根目录,然后运行npm link,这样我们就可以使用我们的generator了,比如,到一个新的空文件夹下运行:yo zx-vue,就可以看到项目开始自动构建了。
      测试完成后,就可以发布到npm官网了,发布流程可参考我另一篇文章npm-从0开始写一个npm module

      zx-vue

      目的

      zx-vue是一个以vue-construct作为模板仓库的脚手架,为了方便新项目构建,也为了今后的新项目能够统一。

      使用

      首先,安装全局yeomman和generator-zx-vue
      npm install -g yo
      npm install -g generator-zx-vue
      然后找一个空的文件夹执行:
      yo zx-vue
      生成项目以后的操作可以参考vue-construct
      最后,generator-zx-vue的地址是generator-zx-vue

      结尾

      我之前原本打算把vuex作为一个可选项,让用户选择是否引入这个库。
      但是,做下来以后发现,因为用到了ejs模板去做这个事情,然后,最终输出的文件会因为<% if (condition) { %>这种ejs语法导致换行,或者缩进不符合eslint。当然,我也可以把项目弄的更空一点,把所有vuex的使用清掉,但这样也不是很好,因为我又想让用户跑起来这个项目就能看到整个全家桶的效果在页面上使用到。
      其实还有另外一种比较暴力的方法就是,我弄一个有vuex的项目,一个没有vuex的项目,然后选择copy哪份,,太暴力。
      憋了好久也没想到什么很好接受的方法,所以就暂且把vuex也直接带上。
      最后,也希望有想法的同学还有大佬多多留言,给点建议^_^

      原文地址

      从零开始做Vue前端架构(9)脚手架

      彩蛋

      网易金融招聘前端工程师:

      任职要求:

      1.本科学历,3年以上相关工作经验;或者硕士学历,1年以上相关工作经验(牛逼的可忽略这条)

      2.精通CSS/DIV/XML/JSON,熟悉http协议;

      3.精通JavaScript,擅长Ajax等页面信息异步展现技术;

      4.熟悉软件工程思想,良好的前端编程能力和编程习惯;

      5.积极向上,有良好的人际沟通能力,良好的工作协调能力,踏实肯干的工作精神;

      6.有大型网站程序开发经验者,优先考虑。

      另外:有github和博客优先考虑

      有兴趣的同学可以私信我,或者简历发我邮箱(nijunjie@corp.netease.com)哦~

      参考资料

      yeoman官方文档

      使用Yeoman定制前端脚手架

      别人写的脚手架generator-webapp

      文件操作相关

      ejs文档

      git-子模块



      欢迎“关注”我的头条号,我会每天更新免费视频课程。

      头条二维码
      关注我的头条号
      头条二维码
      加入我的QQ群

    文章作者:sunny
    本文地址:http://wanlimm.com/77202006218427.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.