JSPM - 使用import和使用脚本标记包含客户端库文件是否有任何优点/缺点？ [英] JSPM - Are there any advantages/disadvantages in including client side library files using import vs using the script tag?
问题描述
我开始在Aurelia网络项目中使用JSPM，我想知道使用 import< client side library>？
I'm starting to use JSPM in my Aurelia web projects and I want to know if there are any consequences or advantages in using the import "<client side library>" ?
我见过JS类中客户端库的代码：
I've seen code like so for client side libraries inside JS classes :
import "jquery";
import "bootstrap/css/bootstrap.css!"
import "bootstrap";
export class App {
constructor {
}
}
问题：以这种方式导入它之间有什么区别/优点/缺点，与传统的< script>相反？ 和< link> <？c $ c> .html 文件中的标签？
Question: What is the difference/advantages/disadvantages between importing it this way as oppose to the traditional include of <script> and <link> tags in the .html file?
<html>
<head>
<link rel="stylesheet" src="<bootstrap path>/bootstrap.css">
</head>
<body>
<script type="text/javascript" src="<bootstrap path>/bootstrap.js"></script>
</body>
</html>
我的试验和错误通过使用 import 在特定的class / js文件中，它将库限制为该特定视图文件，而不是全局可用。
My trial and error shows me that by using import in a particular class/js file, it limits the libraries to that particular view file as oppose to being globally available.
最终当你为这个项目构建这些项目时生产，请问这些库是否需要存在于index.html？
Ultimately when you go to build these project for production, don't these libraries need to exists in the index.html?
推荐答案
我的观点是：你应该使用 import 关键字，原因如下：
My opinion is: you should use the import keyword, and here is why:
- 风格问题：它是ES6风格，Aurelia有点要求你使用它
- 可读性这很重要：其他开发人员会希望你使用
import，因此可能会让他们感到困惑 - 再次，
import负责加载，所以如果你只是添加一个脚本标签，你可以添加一些import，然后可能会重新声明某些功能。 - Beauty ：我不这么认为你打算用Grunt或Gulp连接和丑化所有这些吗？如果是这样，这是额外的工作，因为在默认配置中，它是开箱即用的。如果没有......好吧，不，你应该这样做
- 汇总 即可。这里是最甜蜜的部分。
- A matter of style: it's ES6-style, and Aurelia kinda obliges you to use it
- Readability that matters: other developers would expect you to use
import, so it might confuse them - Again,
importtakes care of loading that, so if you just add a script tag, you might add someimportand then some function might be redeclared. - Beauty: I don't think it's very pretty to have 100
<script>tags in your code - Bundling for production. Are you going to concat and uglify all that with Grunt or Gulp? If so, that's extra work, because in the default config it comes out of the box. If no... well, no, you should do that
- Rollup. And here comes the sweetest part.
JSPM太棒了！这与该项目略有不同 - 它
将存储库与包管理器和客户端模块
加载器相结合，而不是简单地捆绑模块。 JSPM允许您使用
任何模块格式，甚至可以在没有构建步骤的情况下进行开发，因此它是创建应用程序的
的绝佳选择。 Rollup生成较小的
包，这些包不使用复杂的SystemJS格式，因此创建库是一个更好的
选择。 JSPM的未来版本可能会在内部使用Rollup
，因此您将获得两全其美。
Rollup是使用 import 的另一个专业。它的作用是翻录您使用的库并使用您需要的最少量的代码，所以如果您只需要一些东西，比如jQuery，您就不需要让访问者下载50KB（或者它的数量是多少）现在？）。
Rollup is another pro for using import. What it does is ripping the libraries you use and taking the minimal amount of code you need, so if you need only some stuff from, let's say, jQuery, you won't need to make your visitors download 50KB (or how much is it now?).
您可以阅读有关Rollup的更多信息这里。
You can read more about Rollup here.
这篇关于JSPM - 使用import和使用脚本标记包含客户端库文件是否有任何优点/缺点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
