• 开发工具
    • 端对端测试
    • ESLint

    开发工具

    测试是 Web 应用开发过程中不可获缺的工作。Nuxt.js 尽量帮助你简化这部分工作。

    端对端测试

    ava 是一个很强大的 JavaScript 测试框架，结合 jsdom，我们就可以轻松地给 nuxt 应用进行端对端测试。

    首先，我们需要添加 ava 和 jsdom 作为项目的开发依赖：

    1. npm install --save-dev ava jsdom

    然后在 package.json 中添加测试脚本，并配置 ava 如果编译待测试的文件：

    package.json

    1. "scripts": {
    2.   "test": "ava",
    3. },
    4. "ava": {
    5.   "require": [
    6.     "babel-register"
    7.   ]
    8. },
    9. "babel": {
    10.   "presets": [
    11.     "es2015"
    12.   ]
    13. }

    接下来我们可以在 test 目录下编写单元测试的逻辑代码：

    1. mkdir test

    假设我们有这样一个页面 pages/index.vue：

    1. <template>
    2.   <h1 class="red">Hello {{ name }}!</h1>
    3. </template>
    5. <script>
    6. export default {
    7.   data () {
    8.     return { name: 'world' }
    9.   }
    10. }
    11. </script>
    13. <style>
    14. .red {
    15.   color: red;
    16. }
    17. </style>

    当我们利用 npm run dev 启动开发服务器的时候，用浏览器打开 http://localhost:3000，我们能看到红色的 Hello world 标题。

    添加一个单元测试文件 test/index.test.js：

    1. import test from 'ava'
    2. import { Nuxt, Builder } from 'nuxt'
    3. import { resolve } from 'path'
    5. // 我们用一个变量保留 nuxt 和 server 实例的引用
    6. // 这样可以在单元测试结束之后关掉它们
    7. let nuxt = null
    9. // 初始化 Nuxt.js 并创建一个监听 localhost:4000 的服务器
    10. test.before('Init Nuxt.js', async t => {
    11.   const rootDir = resolve(__dirname, '..')
    12.   let config = {}
    13.   try { config = require(resolve(rootDir, 'nuxt.config.js')) } catch (e) {}
    14.   config.rootDir = rootDir // 项目目录
    15.   config.dev = false // 生产构建模式
    16.   nuxt = new Nuxt(config)
    17.   await new Builder(nuxt).build()
    18.   nuxt.listen(4000, 'localhost')
    19. })
    21. // 测试生成的html
    22. test('路由 / 有效且能渲染 HTML', async t => {
    23.   let context = {}
    24.   const { html } = await nuxt.renderRoute('/', context)
    25.   t.true(html.includes('<h1 class="red">Hello world!</h1>'))
    26. })
    28. // 测试元素的有效性
    29. test('路由 / 有效且渲染的HTML有特定的CSS样式', async t => {
    30.   const window = await nuxt.renderAndGetWindow('http://localhost:4000/')
    31.   const element = window.document.querySelector('.red')
    32.   t.not(element, null)
    33.   t.is(element.textContent, 'Hello world!')
    34.   t.is(element.className, 'red')
    35.   t.is(window.getComputedStyle(element).color, 'red')
    36. })
    38. // 关掉服务器和Nuxt实例，停止文件监听。
    39. test.after('Closing server and nuxt.js', t => {
    40.   nuxt.close()
    41. })

    运行上面的单元测试：

    1. npm test

    实际上 jsdom 会有一定的限制性，因为它背后并没有使用任何的浏览器引擎，但是也能涵盖大部分关于 dom元素 的测试了。如果想使用真实的浏览器引擎来测试你的应用，推荐瞅瞅 Nightwatch.js。

    ESLint

    ESLint 是一个很棒的工具，帮助我们提升代码的规范和质量。

    在 Nuxt.js 中集成 ESLint 是非常简单的，首先我们需要安装 ESLint 的一系列依赖包：

    1. npm install --save-dev babel-eslint eslint eslint-config-standard eslint-plugin-html eslint-plugin-promise eslint-plugin-standard eslint-plugin-import eslint-plugin-node

    然后, 在项目根目录下创建 .eslintrc.js 文件用于配置 ESLint：

    1. module.exports = {
    2.   root: true,
    3.   env: {
    4.     browser: true,
    5.     node: true
    6.   },
    7.   parserOptions: {
    8.     parser: 'babel-eslint'
    9.   },
    10.   extends: [
    11.     "eslint:recommended",
    12.     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    13.     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    14.     "plugin:vue/recommended",
    15.     "plugin:prettier/recommended"
    16.   ],
    17.   // 校验 .vue 文件
    18.   plugins: [
    19.     'vue'
    20.   ],
    21.   // 自定义规则
    22.   rules: {
    23.     "semi": [2, "never"],
    24.     "no-console": "off",
    25.     "vue/max-attributes-per-line": "off",
    26.     "prettier/prettier": ["error", { "semi": false }]
    27.   }
    28. }

    最后，我们在 package.json 文件中添加一个 lint和 lintfix脚本命令：

    1. "scripts": {
    2.   "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    3.   "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
    4. }

    你现在可以启动lint来检查错误：

    1. npm run lint

    或者 lintfix 还可以修复那些可修复的

    1. npm run lintfix

    ESLint将忽略所有JavaScript和Vue文件，同时忽略.gitignore中定义的被忽略文件。

    还建议通过webpack启用ESLint热更新模式。这样ESLint将在npm run dev时保存。只需将以下内容添加到您的nuxt.config.js：

    1. ...
    2.   /*
    3.    ** Build configuration
    4.   */
    5.   build: {
    6.    /*
    7.     ** 您可以在这里扩展webpack配置
    8.    */
    9.    extend(config, ctx) {
    10.       // Run ESLint on save
    11.       if (ctx.isDev && ctx.isClient) {
    12.         config.module.rules.push({
    13.           enforce: "pre",
    14.           test: /\.(js|vue)$/,
    15.           loader: "eslint-loader",
    16.           exclude: /(node_modules)/
    17.         })
    18.       }
    19.     }
    20.   }

    有个最佳实践是在 package.json 中增加 "precommit": "npm run lint" ，这样可以实现每次提交代码之前自动进行代码检测校验。