译者：方应杭  来源：知乎 原文：https://zhuanlan.zhihu.com/p/143835487

本文是一篇译文，原文在 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 文件，然后在里面添加了一行 。然后用浏览器打开了 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

相关热门推荐【第 244 期】小智周末学习发现了 10 个好用JavaScript图像处理库【第 243 期】前端！7个快速发现 bug 神仙调试工具【第 242 期】小智在这3年开发中遇到的 CSS 问题及解决方案，有大佬帮他总结好了 ！「前端编程实战 40」新拟物 checkbox 特效【第 241 期】JavaScript重构技巧 — 条件【第 240 期】ES2020 新特性出炉了，你最喜欢哪一个呢？【第 239 期】JavaScript重构技巧 — 对象和值