Nuxt 源码阅读入门一

首先阅读源码，必须要掌握的知识点

1. JS原型链，继承
2. 如果项目涉及到nodejs，还必须了解nodejs的知识
   http://nodejs.cn/api/http://nodejs.cn/learn nodejs入门
3. 如果项目涉及到命令，还必须要知道，命令是如何实现的
4. JS的基础知识，等等
5. 对你要阅读源码的库的使用，足够了解
6. 掌握 vscode 单步运行的方式
   node —inspect-brk index.js
   node —inspect index.js
   结合 debugger ，灵活使用 console.log，
   注意process.argv 注意入参的差异
   注意 命令发起目录 与 命令运行目录的差异
   const target= path.resolve(‘./‘); // 你当前发起命令的目录
   const source= path.resolve(__dirname); // 命令的运行命令
7. 了解监听体系，callback机制

首先我们分析 nuxt 的使用命令

我们直接通过 nuxt 就可以启动当前目录的服务

检查 nuxt 的package.json , 我们找到 bin 的设置

“bin”: “bin/nuxt.js”

#!/usr/bin/env node
const suffix = require('../package.json').name.includes('-edge') ? '-edge' : ''
require('@nuxt/cli' + suffix).run()
.catch((error) => {
    require('consola').fatal(error)
    process.exit(2)
})

整理运行执行链路, 找到一些核心方法进行分析。

在cmd中执行 nuxt

1. require(‘@nuxt/cli’).run
   const command = require(‘./cli-command.js’); // require(‘@nuxt/cli’)

   // cmd 是 require(‘@nuxt/cli-dev’).dev
   cmd = await command.getCommand(‘dev’); // require(‘@nuxt/cli’)

   // 将导致 require(‘./cli-dev.js’).run 被执行
   // 会创建require(‘./cli-command.js’).NuxtCommand的实例，并且
   // 导致 core 被创建 _import(‘@nuxt/core’);
   // 此处相当于 return _import(‘@nuxt/core’) 的实例
   return command.NuxtCommand.run(cmd, argv.slice(1)) // require(‘@nuxt/cli’)

   // this.com 就是前面创建的 cmd
   // require(‘./cli-dev.js’).run 被执行
   await await nuxt.ready(); // require(‘./cli-dev.js’)
   await nuxt.server.listen(); // require(‘./cli-dev.js’)
   this.cmd.run(this) // require(‘./cli-command.js’);
   const { Nuxt } = await core(); // require(‘./cli-command.js’);

     const nuxt = new Nuxt(options)；   // require('./cli-command.js');<br />         return nuxt                                 // require('./cli-command.js');

2. const core = () => _import(‘@nuxt/core’);
   // _import(‘@nuxt/core’); 初始化server
   const server = require(‘@nuxt/server’); // _import(‘@nuxt/core’);
   this.server = new server.Server(this); // _import(‘@nuxt/core’);

this.renderer = this.server; // _import(‘@nuxt/core’);
this.render = this.server.app; // _import(‘@nuxt/core’);

// const config = require(‘@nuxt/config’);
this.options = config.getNuxtConfig(options); // _import(‘@nuxt/core’);
this.options.hooks(this.hook); // _import(‘@nuxt/core’);

1. class Nuxt extends Hookable // _import(‘@nuxt/core’);
   这个是一个自定义事件注册器，nuxt.hook(‘eventName’, callback: function)
   nuxt.callHook(“eventName”, params: any)
   找到对应的 this 可以看到 它注册了那些事件。
   this._hooks
2. build 前 nuxt 注册的事件
   [‘close’, ‘server:devMiddleware’, ‘bundler:progress’, ‘server:nuxt:renderLoading’, ‘generate:before’, ‘build:resources’, ‘watch:restart’, ‘bundler:change’, ‘build:done’]
3. build 后 nuxt 注册的事件没有发生变化