nuxt.js源码分析系列2-项目工程架构继对nuxt.js库的脚手架项目create-nuxt-app源码分析后，现在

前言

继对nuxt.js库的脚手架项目create-nuxt-app源码分析后，现在对nuxt.js主库的分析，本篇主要对工程的整体结构，工程中用到的各种配置文件介绍，和发布前的各种脚本进行功能介绍和分析。

工程整体介绍

nuxt.js库最新版本也是通过lerna来进行子包的管理的，方便版本的统一管理和发布。自动化CI和CD工具主要是通过circleci库进行控制。发布脚本前单元测试，主要是通jest来实现的。

配置文件介绍

.circleci

circleci是一款CI（Continuous Integration）和CD（Continuous Deployment）工具。通过这些工具可以帮助开发团队提高迭代效率和质量。通过.circleci来配置jobs和workflow 来执行预先设置好的各种脚本命令。

.ls-lint.yml

is-lint是一个文件和目录名字检查工具，据说执行检查速度非常快，支持Linux，MacOS和Windows平台。库本身就两个第三方依赖包。

使用方法

安装包

# global
npm install -g @ls-lint/ls-lint

# local
npm install @ls-lint/ls-lint

在根目录下创建.ls-lint.yml配置文件，配置格式如下：

# .ls-lint.yml

ls:
  .js: kebab-case
  .ts: camelCase
  .d.ts: kebab-case
  .mock.ts: kebab-case
  .spec.ts: camelCase
  .test-d.ts: kebab-case
  .config.js: kebab-case
  .umd.js: kebab-case
  .spec.ts.snap: camelCase

  scripts:
    .js: camelCase

  packages/**/{components,collections}:
    .ts: PascalCase
    .spec.ts: PascalCase

ignore:
  - node_modules
  - .git
  - .circleci
  - .github
  - .vscode

3.运行命令

# global
ls-lint

# local
node_modules/.bin/ls-lint # use backslashs for windows

npx @ls-lint/ls-lint

azure-pipelines.yml

renovate.json

renovate是一个支持多语言，多平台的依赖自动更新工具。通过灵活配置renovate.json文件进行灵活的配置。

{
  "extends": [
    "@nuxtjs"
  ],
  "baseBranches": [
    "dev",
    "next"
  ],
  "ignoreDeps": [
    "core-js",
    ...
  ],
  "lockFileMaintenance": {
    "enabled": true
  }
}

package.json中核心script脚本命令介绍

npm run audit

"audit": "improved-yarn-audit --ignore-dev-deps --min-severity moderate -e 1488"

improved-yarn-audit 的目的是改进现有yarn的审核功能，新增一些功能，比如可以忽略包建议，可以设置过滤一些低的安全漏洞等。

--ignore-dev-deps  忽略开发依赖包的安全审核
--min-severity moderate  设置安全界别
-e --exclude 1488  或略安全建议的ID列表

npm run build

"build": "yarn clean && yarn pkg"

build命令包含了两条子命令，yarn clean比较简单，就是删除老的编译包文件夹，重点介绍一下 yarn pkg

"pkg": "node -r esm ./scripts/package",

在介绍脚本内容之间，先简单介绍一下 esm包的用途及简单用法。 esm，官网介绍这是一个最简单，无bebal,无捆绑的ECMAScript模块加载器，支持node 6+。 esm有两种使用方式：

用esm模块加载ES module，以 CommonJS规范导出脚本 index.js

// Set options as a parameter, environment variable, or rc file.
require = require("esm")(module/*, options*/)
module.exports = require("./main.js")

main.js

// ESM syntax is supported.
export {}

直接本地运行，就是咱们上面脚本命令的用法

node -r esm main.js

下面开始介绍 ./scripts/package脚本文件内容，package脚本的目的是统一处理packages文件下各个子包的package.json文件的管理和统一打包。整理package脚本文件逻辑图如下：

npm run ls-lint

"ls-lint": "npx @ls-lint/ls-lint"

校验文件和目录的名字是否符合规范，配置文件.is-lint.yml，上面部分有简单介绍。

总结

通过对nuxt功能的简单介绍，大家可以了解到一个成熟稳定的框架，在发布前是通过那些工具来保证其发布质量的。通过对这些工具的熟悉，可以尝试将其引进自己的业务项目中来提升效率和最大化保证自己项目的质量。接下来会分篇对nuxt的核心模块进行介绍，敬请期待！