乐趣区

关于前端:和-Nodejs-说拜拜Deno零配置解决方案

不晓得大家留神没有,在咱们启动各种类型的 Node repo 时,root 目录很快就会被配置文件塞满。例如,在最新版本的 Next.js 中,咱们就有 next.config.js、eslintrc.json、tsconfig.json 和 package.json。而在款式那边,还有 postcss.config.js 和 tailwind.config.js。

如果加上中间件 middleware.ts,谬误监控 sentry.server.config.js、sentry.client.config.js 和 entry.edge.config.js,以及各种 env 文件、Git 文件和 Docker 文件……于是还没等咱们缓过神来,repo 可能就曾经变成了这个样子:

所有软件都须要配置。毕竟咱们终归要用某种办法来设置本人正在应用的我的项目、工具、插件和软件。然而,真有必要用 30 个文件来运行繁多我的项目吗?答案是不须要,那咱们须要怎么做呢?

配置,但要用上智能默认项

软件畛域没有“银弹”——所有用户的需要都会略有不同。配置能让用户更灵便地依据理论用例,从软件当中吸取最大价值。但“想用软件?先搞配置”的确是种十分蹩脚的用户体验。

咱们以向现有 Next.js 我的项目中增加 TypeScript 为例,看看整个流程要怎么推动。首先,咱们须要装置 TypeScript 和类型:

npm install --save-dev typescript @types/react @types/node

之后须要创立本人的 tsconfig.json:

touch tsconfig.json

接下来,如果大家刚刚开始应用 TypeScript、搞不清本人须要什么配置,那必定要祭起开发者都晓得的“秘密武器”——从 Stack Overflow 上扒一套配置:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

不想手动往我的项目里增加 TypeScript 反对?能够试试 Deno,它原生反对 TypeScript。而这,还仅仅是增加了个 TypeScript。

高效软件能够通过更智能的默认项来预测用户想要达成的成果。这些“预设选项”能为大多数用户提供通过优化的体验,而且无需手动配置。所以说,先给套能用的配置模板,等确有必要时再要求用户调整才是王道。

其实间接把软件配置页面甩到用户脸上,相对不利于品牌的名誉、更有损客户信赖。构想一下,如果咱们第一次应用 Gmail,看到的是这样一幅图景:

那鬼才想用你谷歌呢,还不如持续留在 Hotmail 这边。所以,智能默认项后行,有必要的时候再做配置调整。

配置文件解析

咱们再回到之前的配置列表,这些文件都在那设置啥呢?

  • Ignore 文件 (dockerignore, eslintignore, gitignore, prettierignore, styleignore): 它们的作用就是从操作中排除某些文件和目录。它们有助于放弃环境清洁、让执行流程更高效。
  • 运行命令文件 (eslintrc.json, lintstagedrc.json, nvmrc, nycrc, stylelintrc.json, prettierrc.json, swcrc): 运行命令(rc)配置文件负责指定某些命令在运行时的设置或参数,例如 eslint、lint-staged 等。
  • 包文件 (package.json, yarn.lock): 这些文件提供的是对于自动化依赖项和脚本的重要信息,从而对我的项目环境进行对立治理。
  • Next.js 文件 (middleware.ts, next-env.d.ts, Next.config.js, tsconfig.json): 这些文件治理 Next.js 应用程序的设置和配置。
  • Docker (Dockerfile, Dockerfile.deploy, docker-compose.yml): 这些文件管理应用程序在容器内的主动部署和扩大配置。
  • 其余 (editorconfig, happo.js, babel.config.js, playwright.config.ts, sentry.client.config.js, sentry.server.config.js, sentry.properties,): 这些配置文件负责自定义并治理开发环境中的各方面设置,包含第三方工具和库。

除此之外,还有 Next.js. Docker. Sentry. Happo. ESLint. npm. Yarn. Playwright. Babel. VSCode. SWC. Stylelint. Prettier. NVM. NYC. lint-staged. Git。事实上,这些工具并不深奥,属于是将 Next.js 应用程序部署到生产环境所须要的惯例汇合。

JavaScript 生态系统

尽管现在 Node.js 次要用于构建网站和 Web 利用,但它最后的设计指标其实没那么强烈的倾向性,更多是用事件驱动架构来启用异步 I/O。但随着 Node 的风行,JavaScript 忽然就霸占了洼地:跟浏览器 /DOM、文件系统和 Unix 交互,构建零碎、捆绑、转译,等等。

JavaScript 的宽泛实用性,在 npm 注册表中超过 200 万个模块上失去了深切体现。为了发挥作用,JavaScript 模块必须可能反对越来越多的框架、元框架、构建工具等,以便在任何状况下都能针对各种工作流程顺利接入不同我的项目。最间接的办法当然就是用更宽泛的配置文件来放弃模块的泛用能力,所以一大堆配置文件体现的其实是 JavaScript 须要跟多种框架、工具和技术栈配合应用的主观复杂性。

随着越来越多的工具被增加到 Node.js 我的项目当中,配置文件不仅变得愈发繁琐,还会升高开发人员的工作效率。

化繁为简

软件是达成指标的伎俩,真正高效的软件绝不会“恶心”用户,而是帮忙他们疾速实现工作。

Node.js 最后的构建指标是作为异步 I/O、由事件驱动的 JavaScript 运行时,过后的缔造者并没预料到它会对 Web 开发的日后改革施展关键作用(目前,每三个新网页或 Web 利用中,就有一个用到 Node)。然而,当开发人员应用 Node 构建新产品时,往往须要破费大量工夫来整合本人须要的技术栈和工作流程——比方设置 TypeScript、设置本人相熟的测试框架和构建流程等。

那有没有一种方法,能让咱们的 Web 构建成绩立刻投入生产?

这就是 Deno 我的项目的意义所在。它是一种具备零配置加智能默认项的 Web 原生运行时,您能够在开发新我的项目时即刻享受到它带来的效率晋升。它具备原生 TypeScript 反对能力,因而无需额定花工夫做设置。Deno 还附带一套弱小的工具链,提供内置的格式化、linting 质量检查、测试等性能,全副开箱即用。最初,Deno 还应用与 Web 兼容的 API,所以如果大家曾经在构建 Web 利用,那上手 Deno 应该不会有任何难度。

编程的意义就在于此:治理复杂性、化繁为简。所以,让咱们携手 Deno,辞别宜人的配置步骤。

退出移动版