在没有构建系统的情况下编写 Javascript | Linux 中国

admin 2023年3月27日20:09:38评论15 views字数 6412阅读21分22秒阅读模式
 
在没有构建系统的情况下编写 Javascript | Linux 中国
导读:当我开始一个新的前端项目时,我面临的问题是:我是否应该使用构建系统?                     
在没有构建系统的情况下编写 Javascript | Linux 中国本文字数:6690,阅读时长大约:8分钟

嗨!这周我一直在写一些 Javascript,和往常一样,当我开始一个新的前端项目时,我面临的问题是:我是否应该使用构建系统?

我想谈谈构建系统对我有什么吸引力,为什么我(通常)仍然不使用它们,以及一些前端 Javascript 库要求你使用构建系统时,为什么我觉得这让我感到沮丧。

我写这篇文章是因为我看到的大多数关于 JS 的文章都假定你正在使用构建系统,而对于像我这样的人来说,编写非常简单的、不需要构建系统的小型 Javascript 项目时,构建系统可能反而添加了很多麻烦。

在没有构建系统的情况下编写 Javascript | Linux 中国

什么是构建系统?

构建系统的思路是,你有一堆 Javascript 或 Typescript 代码,你想在把它放到你的网站上之前把它翻译成不同的 Javascript 代码。

构建系统可以做很多有用的事情,比如:

◈ (出于效率的考虑)将 100 多个 JS 文件合并成一个大的捆绑文件
◈ 将 Typescript 翻译成 Javascript
◈ 对 Typescript 进行类型检查
◈ 精简化
◈ 添加 Polyfills 以支持旧的浏览器
◈ 编译 JSX
◈ 摇树优化(Tree Shaking)(删除不使用的 JS 代码以减少文件大小)
◈ 构建 CSS(像 tailwind🔗 tailwindcss.com 那样)
◈ 可能还有很多其他重要的事情

正因为如此,如果你今天正在构建一个复杂的前端项目,你可能会使用 Webpack、Rollup、Esbuild、Parcel 或 Vite 等构建系统。

很多这些功能对我很有吸引力,我过去使用构建系统也是出于这样一些原因: 例如,Mess With DNS🔗 messwithdns.net 使用 Esbuild 来翻译 Typescript,并将许多文件合并成一个大文件。

在没有构建系统的情况下编写 Javascript | Linux 中国

目标:轻松地对旧的小网站进行修改

我做了很多简单的小网站(之一🔗 css-examples.wizardzines.com之二🔗 questions.wizardzines.com之三🔗 sql-playground.wizardzines.com之四🔗 nginx-playground.wizardzines.com),我对它们的维护精力大约为 0,而且我改变它们的频率很低。

我的目标是,如果我有一个 3、5 年前做的网站,我希望能在 20 分钟内,

◈ 在一台新的电脑上从 GitHub 获取源代码
◈ 做一些修改
◈ 把它放到互联网上

但我对构建系统(不仅仅是 Javascript 构建系统!)的经验是,如果你有一个 5 年历史的网站,要重新构建这个网站会非常痛苦。

因为我的大多数网站都很小,所以使用构建系统的 优势 很小 —— 我并不真的需要 Typescript 或 JSX。我只要有一个 400 行的 script.js 文件就可以了。

在没有构建系统的情况下编写 Javascript | Linux 中国

示例:尝试构建 SQL 实验场

我的一个网站(SQL 试验场🔗 sql-playground.wizardzines.com)使用了一个构建系统(它使用 Vue)。我最后一次编辑该项目是在 2 年前,是在另一台机器上。

让我们看看我今天是否还能在我的机器上轻松地构建它。首先,我们要运行 npm install。下面是我得到的输出:

  1. $ npm install
  2. [lots of output redacted]
  3. npm ERR! code 1
  4. npm ERR! path /Users/bork/work/sql-playground.wizardzines.com/node_modules/grpc
  5. npm ERR! command failed
  6. npm ERR! command sh /var/folders/3z/g3qrs9s96mg6r4dmzryjn3mm0000gn/T/install-b52c96ad.sh
  7. npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/surface/init.o
  8. npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/avl/avl.o
  9. npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/backoff/backoff.o
  10. npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/channel/channel_args.o
  11. npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/channel/channel_stack.o
  12. npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/channel/channel_stack_builder.o
  13. npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/channel/channel_trace.o
  14. npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/channel/channelz.o

在构建 grpc 时出现了某种错误。没问题。反正我也不需要这个依赖关系,所以我可以花 5 分钟把它拆下来重建。现在我可以 npm install 了,一切正常。

现在让我们试着构建这个项目:

  1. $ npm run build
  2. ? Building for production...Error: error:0308010C:digital envelope routines::unsupported
  3. at new Hash (node:internal/crypto/hash:71:19)
  4. at Object.createHash (node:crypto:130:10)
  5. at module.exports (/Users/bork/work/sql-playground.wizardzines.com/node_modules/webpack/lib/util/createHash.js:135:53)
  6. at NormalModule._initBuildHash (/Users/bork/work/sql-playground.wizardzines.com/node_modules/webpack/lib/NormalModule.js:414:16)
  7. at handleParseError (/Users/bork/work/sql-playground.wizardzines.com/node_modules/webpack/lib/NormalModule.js:467:10)
  8. at /Users/bork/work/sql-playground.wizardzines.com/node_modules/webpack/lib/NormalModule.js:499:5
  9. at /Users/bork/work/sql-playground.wizardzines.com/node_modules/webpack/lib/NormalModule.js:356:12
  10. at /Users/bork/work/sql-playground.wizardzines.com/node_modules/loader-runner/lib/LoaderRunner.js:373:3
  11. at iterateNormalLoaders (/Users/bork/work/sql-playground.wizardzines.com/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
  12. at iterateNormalLoaders (/Users/bork/work/sql-playground.wizardzines.com/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
  13. at /Users/bork/work/sql-playground.wizardzines.com/node_modules/loader-runner/lib/LoaderRunner.js:236:3
  14. at runSyncOrAsync (/Users/bork/work/sql-playground.wizardzines.com/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
  15. at iterateNormalLoaders (/Users/bork/work/sql-playground.wizardzines.com/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
  16. at Array.<anonymous> (/Users/bork/work/sql-playground.wizardzines.com/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
  17. at Storage.finished (/Users/bork/work/sql-playground.wizardzines.com/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
  18. at /Users/bork/work/sql-playground.wizardzines.com/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9

这个 Stack Overflow 的答案🔗 stackoverflow.com 建议运行 export NODE_OPTIONS=--openssl-legacy-provider 来解决这个错误。

这很有效,最后我得以 npm run build 来构建这个项目。

这其实并不坏(我只需要删除一个依赖关系和传递一个略显神秘的 Node 选项!),但我宁愿不被那些构建错误破坏。

在没有构建系统的情况下编写 Javascript | Linux 中国

对我来说,对于小项目来说,构建系统并不值得

对我来说,一个复杂的 Javascript 构建系统对于 500 行的小项目来说似乎并不值得 —— 它意味着放弃了在未来能够轻松更新项目的能力,以换取一些相当微小的好处。

在没有构建系统的情况下编写 Javascript | Linux 中国

Esbuild 似乎更稳定一些

我想为 Esbuild 大声叫好: 我 在 2021 年了解到 Esbuild🔗 jvns.ca,并用于一个项目,到目前为止,它确实是一种更可靠的构建 JS 项目的方式。

我刚刚尝试在一台新电脑上构建一个我最后一次改动在 8 个月前的 Esbuild 项目,结果成功了。但我不能肯定的说,两年后我是否还能轻松的建立那个项目。也许会的,我希望如此!

在没有构建系统的情况下编写 Javascript | Linux 中国

不使用构建系统通常是很容易的

下面是 Nginx 实验场🔗 nginx-playground.wizardzines.com 代码中导入所有库的部分的样子:

  1. <script src="js/vue.global.prod.js"></script>
  2. <script src="codemirror-5.63.0/lib/codemirror.js"></script>
  3. <script src="codemirror-5.63.0/mode/nginx/nginx.js"></script>
  4. <script src="codemirror-5.63.0/mode/shell/shell.js"></script>
  5. <script src="codemirror-5.63.0/mode/javascript/javascript.js"></script>
  6. <link rel="stylesheet" href="codemirror-5.63.0/lib/codemirror.css">
  7. <script src="script.js "></script>

这个项目也在使用 Vue,但它只是用 <script src 来加载 Vue —— 前端没有构建过程。

在没有构建系统的情况下编写 Javascript | Linux 中国

一个使用 Vue 的无构建系统模板

有几个人问如何在没有构建系统的情况下开始编写 Javascript。当然,如果你想的话,你可以写原味的 JS,但我常用的框架是 Vue 3。

这是我做的一个小模板🔗 github.com,用于启动一个没有构建系统的 Vue 3 项目。它只有 2 个文件和大约 30 行的 HTML/JS。

在没有构建系统的情况下编写 Javascript | Linux 中国

有些库需要你使用构建系统

构建系统这些事情最近盘旋在我的脑海里,因为这周我正在用 CodeMirror 5 做一个新项目,我看到有一个新版本,CodeMirror 6。

所以我想 —— 很酷,也许我应该使用 CodeMirror 6 而不是 CodeMirror 5。但是 —— 似乎没有构建系统你就不能使用 CodeMirror 6(根据 迁移指南🔗 codemirror.net),所以我打算坚持使用 CodeMirror 5。

同样地,你以前可以把 Tailwind 作为一个巨大的 CSS 文件下载,但是 Tailwind 3🔗 tailwindcss.com 似乎根本不能作为一个大的 CSS 文件使用,你需要运行 Javascript 来构建它。所以我现在要继续使用 Tailwind 2。(我知道,我知道,你不应该使用大的 CSS 文件,但是它验收只有 300KB,而且我真的不希望有构建步骤)

(更正:看起来 Tailwind 在 2021 年发布了一个 独立的命令行工具🔗 tailwindcss.com,这似乎是一个不错的选择)

我不完全确定为什么有些库不提供无构建系统版本 —— 也许发布无构建系统版本会给库增加很多额外的复杂性,而维护者认为这不值得。或者,库的设计意味着由于某种原因,不可能发布无构建系统版本。

在没有构建系统的情况下编写 Javascript | Linux 中国

我希望有更多的无构建系统的 Javascript 技巧

到目前为止,我的主要策略是:

◈ 在某个库的网站上搜索 “CDN”,找到一个单独的 Javascript 文件
◈ 使用 https://unpkg.com 来查看该库是否有一个我可以使用的内置版本
◈ 托管我自己的库的版本,而不是依赖可能崩溃的 CDN
◈ 编写我自己的简单集成方案,而不是拉入另一个依赖关系(例如,前几天我为 Vue 编写了自己的 CodeMirror 组件)。
◈ 如果我想要一个构建系统,就使用 Esbuild

还有一些看起来很有趣但我还没有研究过的东西:

◈ 这个 关于 Javascript 注释中类型语法的 Typescript 建议🔗 devblogs.microsoft.com
◈ 一般来说,ES 模块

via: https://jvns.ca/blog/2023/02/16/writing-javascript-without-a-build-system/

作者:Julia Evans 选题:lkxed 译者:wxy 校对:wxy

本文由 LCTT 原创编译,Linux中国 荣誉推出

在没有构建系统的情况下编写 Javascript | Linux 中国
LCTT 译者 :Xingyu.Wang
💎💎💎
在没有构建系统的情况下编写 Javascript | Linux 中国
翻译: 977.0 篇

|

贡献: 3167 天
2014-07-25
2023-03-27
https://linux.cn/lctt/wxy
欢迎遵照 CC-BY-SA 协议规定转载,
如需转载,请在文章下留言 “转载:公众号名称”,
我们将为您添加白名单,授权“转载文章时可以修改”。


原文始发于微信公众号(Linux中国):在没有构建系统的情况下编写 Javascript | Linux 中国

  • 左青龙
  • 微信扫一扫
  • weinxin
  • 右白虎
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2023年3月27日20:09:38
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                   在没有构建系统的情况下编写 Javascript | Linux 中国https://cn-sec.com/archives/1633987.html

发表评论

匿名网友 填写信息