阿里云「飞天发布时刻」2024来啦!新产品、新特性、新能力、新方案,等你来探~ 了解详情
写点什么

和 Node.js 配置地狱说拜拜!Deno 零配置解决方案

作者 |Andy Jiang

  • 2023-09-19
    北京
  • 本文字数:2711 字

    阅读完需:约 9 分钟

和Node.js配置地狱说拜拜!Deno 零配置解决方案

在使用 Node.js 进行构建时,配置问题常常会影响开发人员的工作效率。好在有了 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 应用程序部署到生产环境所需要的常规集合。但问题是,真需要 30 个文件那么多吗?

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,告别恼人的配置步骤。

 

原文链接:

https://deno.com/blog/node-config-hell

相关阅读:


Node.js 未来发展趋势

Node 之父着急宣布:Deno 将迎来重大变革,更好地兼容

Node 版本控制

Node.js 20 正式发布

2023-09-19 12:587168

评论

发布
暂无评论
发现更多内容

初学者也能看懂的 Vue3 源码中那些实用的基础工具函数

若川

JavaScript vue.js 签约计划第二季

尤雨溪几年前开发的“玩具 vite”,才100多行代码,却十分有助于理解 vite 原理

若川

JavaScript vue.js 前端 签约计划第二季

让容器跑得更快:CPU Burst 技术实践

阿里巴巴云原生

阿里云 容器 云原生 cpu CPU调度

react源码解析11.生命周期调用顺序

buchila11

React

何为异步流

喵叔

28天写作 12月日更

语音识别之降噪技术

攻城先森

音视频 语音识别 智能降噪 签约计划第二季

手把手带你漫游语音识别世界|入门到实战

攻城先森

音视频 语音识别 内容合集 签约计划第二季

前端工程建设那些事

梁龙先森

内容合集 签约计划第二季

【docker 总结】第二篇 - Image 镜像

Brave

Docker 12月日更

信息

Nydia

Prometheus Exporter (二十六)Statsd Exporter

耳东@Erdong

Prometheus 28天写作 exporter 12月日更 StatsD

深入理解Flutter相机插件【Flutter专题22】

坚果

flutter 28天写作 签约计划第二季 12月日更

Vue 3.2 发布了,那尤雨溪是怎么发布 Vue.js 的?

若川

JavaScript vue.js 前端 签约计划第二季

面试官:react中的setState是同步的还是异步的

全栈潇晨

React

手把手教你提交Jar包到Maven公共仓库 | 萌新写开源02

Zhendong

Java maven

阿里Java编码手册实战详解-命名规范篇

JavaEdge

12月日更

尤雨溪推荐神器 ni ,能替代 npm/yarn/pnpm ?简单好用!源码揭秘!

若川

JavaScript vue.js 前端 签约计划第二季

[Pulsar] DLQ原理

Zike Yang

Apache Pulsar 12月日更

Scrapy Spider中间件,你学会了吗?本篇博客有一案例

梦想橡皮擦

12月日更

netty系列之:小白福利!手把手教你做一个简单的代理服务器

程序那些事

Java Netty 代理 程序那些事 12月日更

go语言技术探究--合集

en

内容合集 签约计划第二季

javascript中获取 DOM 元素的几种方式

你好bk

JavaScript 前端 大前端 DOM BOM

Game On Serverless:SAE 助力广州小迈提升微服务研发效能

阿里巴巴云原生

阿里云 Serverless 云原生 SAE 合作

react源码解析12.状态更新流程

buchila11

React

前端开发:正确安装nvm的方法(非常详细)

三掌柜

28天写作 28 12月日更 12月

面试官:useLayoutEffect和useEffect的区别

全栈潇晨

React

Structuring: 魔法诞生之法

mtfelix

28天写作

Kafka 在消息队列领域为何如此流行?

老周聊架构

kafka 内容合集 签约计划第二季

效能研发:做一款GraphQL代码生成器

梁龙先森

签约计划第二季

Vue 团队公开快如闪电的全新脚手架工具 create-vue,未来将替代 Vue-CLI,才300余行代码,学它!

若川

JavaScript vue.js 前端 签约计划第二季

日常的情绪控制

搬砖的周狮傅

情绪控制

和Node.js配置地狱说拜拜!Deno 零配置解决方案_框架_InfoQ精选文章