一次运行,到处报错:一名前端萌新绝望的入门之路
共 2753字,需浏览 6分钟
·
2021-03-04 00:09
❝本文是一篇译文,原文在 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」 说:不只是新人。
最后
如果你觉得这篇内容对你挺有启发,我想邀请你帮我三个小忙:
点个「在看」,让更多的人也能看到这篇内容(喜欢不点在看,都是耍流氓 -_-)
欢迎加我微信「qianyu443033099」拉你进技术群,长期交流学习...
关注公众号「前端下午茶」,持续为你推送精选好文,也可以加我为好友,随时聊骚。