json-server的实践与自定义配置化

作者: 天驱丶 | 来源:发表于2018-05-25 03:07 被阅读54次

    背景

    以前的项目要不是前人搭建的,要不就是从 vue-cli 搭建,然后将一些旧项目公用的代码搬过来,这些操作下来一个小时估计是跑不了的了,所以搭建属于自己的 template 是一件省时省力的事情。

    本文章不会讲到 vue-cli 的原理和实现,有兴趣的同学可以阅读 从vue-cli源码学习如何写模板,这篇文章写的很好,足够理解 vue-cli 的原理了。

    如何修改 template 文件

    首先,需要从 template/webpack 下载官方 template/webpack 项目,我们主要修改的地方是根目录下的meta.js文件和template目录;

    meta.js:

    主要改两个地方:prompts 和 filters,我们用过 prompts 库的都知道,这是一个命令行的问答工具,在使用vue init webpack my-project这个命令的使用,需要回答一些问题,就是依赖于 prompts 这个库;

    // prompts(节选)
    prompts: {
        name: {
          when: 'isNotTest', // 代表不是test的时候询问(isNotTest可以看scenarios/index.js文件)
          type: 'string', // 问题的类型,这里 string 代表输入项目名字
          required: true, // 必须填写 name
          message: 'Project name', // 问题的描述
        },
        lint: {
          when: 'isNotTest',
          type: 'confirm',
          message: 'Use ESLint to lint your code?',
        },
        lintConfig: {
          when: 'isNotTest && lint', // 代表不是test并且上面lint问题选择yes才询问
          type: 'list', // 答案从choices中选择
          message: 'Pick an ESLint preset',
          choices: [
            {
              name: 'Standard (https://github.com/standard/standard)',
              value: 'standard',
              short: 'Standard',
            },
            {
              name: 'Airbnb (https://github.com/airbnb/javascript)',
              value: 'airbnb',
              short: 'Airbnb',
            },
            {
              name: 'none (configure it yourself)',
              value: 'none',
              short: 'none',
            }
          ],
        }
    }
    
    // filters(节选)
    filters: {
        '.eslintrc.js': 'lint', // .eslintrc.js文件只有lint问题选择yes才会创建
        'build/webpack.test.conf.js': "unit && runner === 'karma'", // webpack.test.conf.js文件只有unit问题选择yes并且runner问题选择karma选项才会创建
        'src/router/**/*': 'router' // src/router目录只有在router问题选择yes才会创建
      }
    

    template:

    • 编写EOF条件
    template
    可以看到template文件夹看起来就是一个vue init命令后的目录了,但仔细看文件的话可以看到差异:
    // package.json/scripts
    "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        {{#if_eq runner "jest"}}
        "unit": "jest --config test/unit/jest.conf.js --coverage",
        {{/if_eq}}
        {{#if_eq runner "karma"}}
        "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
        {{/if_eq}}
        {{#e2e}}
        "e2e": "node test/e2e/runner.js",
        {{/e2e}}
        {{#if_or unit e2e}}
        "test": "{{#unit}}npm run unit{{/unit}}{{#unit}}{{#e2e}} && {{/e2e}}{{/unit}}{{#e2e}}npm run e2e{{/e2e}}",
        {{/if_or}}
        {{#lint}}
        "lint": "eslint --ext .js,.vue src{{#unit}} test/unit{{/unit}}{{#e2e}} test/e2e/specs{{/e2e}}",
        {{/lint}}
        "build": "node build/build.js"
      }
    

    可以看多在package.json文件里穿插着一些EOF风格的标签,这些标签可分为两种(可以自己扩展EOF条件)

    {{#lint}}***{{/lint}}表示标签内的内容只有在lint问题选择yes才会存在

    {{#if_eq runner "jest"}}***{{/if_eq}}表示标签内的内容只有在runner问题的答案等于jest的情况才会存在,个人可以扩展EOF的条件命令(在lib/generate.js, 默认有if_equnless_eq两个命令)

    • 修改文件目录

    这个直接将template的目录结构改变即可,这里把src目录改成自己习惯的目录结构

    template/src

    我自己的template

    github:masongzhi/vue-template-webpack

    用法:vue init masongzhi/vue-template-webpack my-project

    vue-template-webpack 特点:

    • 基于 template/webpack 模板
    • 自定义目录结构
    • 增加 vuex 选项
    • 增加 filters 选项
    • 增加 mock 服务器选项
    • 增加 prettier 选项(不选择 lint 情况下,lint 情况请自行添加)

    总结

    其实我发觉再不介绍原理的情况下,感觉写的挺乱的,所以建议大家可以先阅读 从vue-cli源码学习如何写模板,再看本文章进行实践;

    创建好自己的template模板后,之后再搭建新项目就不用手动的复制黏贴了,确实是很方便的。

    ps

    项目文章:json-server的实践与自定义配置化

    相关文章

      网友评论

      本文标题:json-server的实践与自定义配置化

      本文链接:https://www.haomeiwen.com/subject/pczejftx.html