Today’s Javascript, from an outsider’s perspective

栏目: IT技术 · 发布时间: 4年前

内容简介:Today I was helping a friend who is a great computer scientist, but not a JS person. Since for the past 6 years my day job is doing usability research & teaching at MIT, I couldn’t help but cringe at the slog that this was. Lo and behold, a pile of unneces

Today I was helping a friend who is a great computer scientist, but not a JS person. Since for the past 6 years my day job is doing usability research & teaching at MIT, I couldn’t help but cringe at the slog that this was. Lo and behold, a pile of unnecessary error conditions, cryptic errors, and lack of proper feedback. And I don’t feel I did a good job communicating the frustration he went through in the one hour or so until he gave up.

It went a bit like this…

Note: N ames of packages and people have been changed to protect their identity. I’ve also omitted a few issues he faced that were too specific to the package at hand.

John:Hey, I want to try out this algorithm I found on Github, it says to use import functionName from packageName and then call functionName(arguments) . Seems simple enough! I don’t really need a UI, so I’m gonna use Node!

Lea:Sure, Node seems appropriate for this!

John runs npm install packageName --save as recommended by the package’s README

John runs 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

John:But I don’t have a package.json…

Lea:Run npm init , it will generate it for you!

John runs npm init , goes through the wizard, adds type: "module" manually to the generated package.json.

John runs node index.js

Node:

SyntaxError: Cannot use import statement outside a module

Oddly, the error was thrown from an internal module of the project this time. WAT?!

Lea:Ok, screw this, just run it in a browser, it’s an ES6 module and it’s just a pure JS algorithm that doesn’t use any Node APIs, it should work.

John makes a simple index.html with a <script type="module" src="index.js">

John loads index.html in a browser

Nothing in the console. Nada. Crickets.

Lea:Oh, you need to adjust your module path to import packageName. Node does special stuff to resolve based on node_modules , now you’re in a browser you need to specify an explicit path yourself.

John looks, at his filesystem, but there was no node_modules directory.

Lea:Oh, you ran npm install before you had a package.json , that’s probably it! Try it again!

John runs npm install packageName --save again

John:Oh yeah, there is a node_modules now!

John desperately looks in node_modules to find the entry point

John edits his index.js accordingly, reloads index.html

Firefox:

Incorrect MIME type: text/html

Lea:Oh, you’re in file:// ! Dude, what are you doing these days without a localhost? Javascript is severely restricted in file:// today.

John:But why do I… ok fine, I’m going to start a localhost.

John starts localhost , visits his index.html under http://localhost:80

Firefox:

Incorrect MIME type: text/html

John:Sigh. Do I need to configure my localhost to serve JS files with a text/javascript MIME type?

Lea:What? No! It knows this. Um… look at the Networks tab, I suspect it can’t find your module, so it’s returning an HTML page for the 404, then it complains because the MIME type of the error page is not text/javascript .

Looks at node_modules again, corrects path. Turns out VS Code collapses folders with only 1 subfolder, which is why we hadn’t noticed .

FWIW I do think this is a good usability improvement on VS Code’s behalf, it improves efficiency, but they need to make it more visible that this is what has happened.

Firefox:

SyntaxError: missing ) after formal parameters

Lea:What? That’s coming from the package source, it’s not your fault. I don’t understand… can we look at this line?

John clicks at line throwing the error

Lea:Oh my goodness. This is not Javascript, it’s Typescript!! With a .js extension!!

John:I just wanted to run one line of code to test this algorithm… :sob::sob::sob:

John gives up . Concludes never to touch Node, npm, or ES6 modules with a barge pole.

The End.

Note that John is a computer scientist that knows a fair bit about the Web: He had Node & npm installed, he knew what MIME types are, he could start a localhost when needed. What hope do actual novices have?


以上所述就是小编给大家介绍的《Today’s Javascript, from an outsider’s perspective》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

人月神话(40周年中文纪念版)

人月神话(40周年中文纪念版)

(美) 布鲁克斯(Brooks, F. P.) 著 / UML China翻译组,汪颖 译 / 清华大学出版社 / 2015-4-1 / 68.00元

在软件领域,很少能有像《人月神话》一样具有深远影响力和畅销不衰的著作。Brooks博士为人们管理复杂项目提供了最具洞察力的见解,既有很多发人深省的观点,又有大量软件工程的实践。本书内容来自Brooks博士在IBM公司SYSTEM/360家族和OS/360中的项目管理经验,该项目堪称软件开发项目管理的典范。该书英文原版一经面世,即引起业内人士的强烈反响,后又译为德、法、日、俄、中、韩等多种文字,全球......一起来看看 《人月神话(40周年中文纪念版)》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

URL 编码/解码
URL 编码/解码

URL 编码/解码