2020 年，JS 令一個新人沮喪

本文是一篇譯文，原文在 Hackers News 上的點數超過 200 點。

個人朋友是一位著名的計算機科學家，他以前沒有用過 JS，今天他須要用到 GitHub 的一個 JS 庫。而我在過去的 6 年主要的工做是在麻省理工學院進行可用性研究和教學，因此我其實也沒什麼把握。最終，咱們倆出來搞出一堆錯誤以外一無所得，他也放棄了這個 JS 庫。這篇文章我將試着爲你道出他在這個過程當中遇到的各類情況，以及心中的沮喪。

故事是這樣的……（注意，庫名和人名都通過了加工以免隱私泄露，有些錯誤我直接忽略了，還有些錯誤我是憑記憶回憶的，因此若是我說錯了，還請指出）

約翰：嘿，我在 GitHub 上找到了一個算法，介紹裏說使用 import functionName from packageName 就能夠調用 functionName(arguments) 來使用這個算法了，看起來很簡單，看起來我只須要安裝 Node 就能夠搞定它了！

我：恩，Node 能夠。

而後約翰運行了 npm install packageName --save，由於庫的 README 裏是這樣說的。

接着，他運行了 node index.js

Node 報錯：

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. SyntaxError: Cannot use import statement outside a module

約翰：哪來的 package.json 啊……

我：運行 npm init 就會自動建立一個 package.json 哦

好吧，約翰運行了 npm init，並按照命令行的步驟依次進行設置，最後約翰在 package.json 裏面加了一句 type: "module"。

接着，他再次運行了 node index.js

Node 報錯：

SyntaxError: Cannot use import statement outside a module

約翰感到很奇怪，由於這個錯誤是這個 JS 庫內部文件拋出來的。怎麼會這樣？

我：繼續吧，這個報錯應該不要緊，你試試直接在瀏覽器裏運行吧，不用 Node 了。這應該是一個 ES6 模塊，它是一個算法，沒有用到 Node 的 API，因此直接用瀏覽器就行。

約翰遵從了個人建議，他建立了 index.html 文件，而後在裏面添加了一行 <script type="module" src="index.js">。而後用瀏覽器打開了 index.html。

然而，控制檯沒有如期地顯示出結果。

我：歐，我忘了說了，你須要調整一下路徑。Node 會自動從 node_modules 里加載 JS 文件，可是 Firefox 不會這麼作，你須要本身把路徑寫全。

約翰查看了文件目錄，發現並無 node_modules 文件夾。

我：好吧，你剛剛是否是先運行的 npm install 後建立的 package.json，應該是這樣，你須要再次運行 npm install 纔會出現 node_modules 目錄。

約翰再次運行了 npm install packageName --save。

約翰：你說得對，如今有 node_modules 目錄了。

約翰絕望地翻閱着 node_modules 目錄，最終找到了 JS 文件的完整路徑。

而後約翰把文件路徑更新到了 index.js 。

Firefox 報錯：

Incorrect MIME type: text/html

我：歐，你不能用 file:// 協議來打開 index.html。你須要在本地啓動一個 HTTP 服務，file 協議裏的 JS 是被嚴重限制的。

約翰：可是我爲何要……好吧，我啓動一個 HTTP 服務器就好了吧。

接着，約翰在啓動了一個 HTTP 服務，而後用瀏覽器訪問 http://localhost:80

Firefox 報錯：

Incorrect MIME type: text/html

約翰：唉，我是否是應該給 JS 文件加上 text/javascript MIME 類型？

我：不該該啊，這應該是自動加上的。呃……你打開 Network，我懷疑是由於瀏覽器找不到你的 JS 庫文件，因而返回了 404 頁面，404 頁面被看成 JS 文件纔會報這個錯。

咱們從新查看文件目錄，發現 VSCode 默認合併了某些目錄，致使約翰寫錯了路徑。我以爲 VSCode 的這個功能雖然方便，可是 VSCode 應該給出明顯的提示纔好。

Firefox 報錯：

SyntaxError: missing ) after formal parameters

我：怎麼會這樣，難道是這個包的源代碼自己就有錯誤。咱們點開這個錯誤提示看看是哪一行報錯吧。

約翰點開了對應的文件。

我：天啊，這不是 JS 文件，這是 TypeScript 啊。可是這個文件的後綴是 .js 啊！

約翰：我只是想測試一個 JS 算法啊……😭😭😭

約翰最終放棄了，並說不再想碰 Node、npm 和 ES6 模塊了。

故事講完了。

你們注意，約翰是一個計算機科學家，對 Web 懂得很多，他已經安裝了 Node 和 npm，他也知道 MIME types 是什麼，他也會本身啓動一個 HTTP 服務器。若是他是一個新手，那就真的沒但願（搞定這個庫）了。

譯文完。

接下來我摘錄一些文章的評論。

Manoel Vilela 說：四年前我說 JS 的開發流程（以及 JS 自己）就是辣雞，被其餘人噴。這篇文章並不會令我驚訝，故事頗有趣（也很悲哀）。新人沒有但願，只有痛苦和難受。

The Dan 回覆 Manoel Vilela 說：不僅是新人。

tjholowaychuk 說：仍是這麼亂哈 :D