JSPM

Question

我开始在我的 Aurelia 网络项目中使用 JSPM，我想知道使用 import "<client side library>" 是否有任何后果或优势？

我在 JS 中看到过这样的客户端库代码类 :

import "jquery";
import "bootstrap/css/bootstrap.css!"
import "bootstrap";

export class App {
    constructor {

    }
}

问题： 以这种方式导入它与传统的包含 <script> 和 <link> 标签之间的 difference/advantages/disadvantages 是什么.html 文件？

<html>
<head>
   <link rel="stylesheet" src="<bootstrap path>/bootstrap.css">
</head>
<body>

   <script type="text/javascript" src="<bootstrap path>/bootstrap.js"></script>
</body>
</html>

我的试验和错误告诉我，通过在特定 class/js 文件中使用 import，它将库限制为该特定视图文件，而不是全局可用。

最终，当您为生产构建这些项目时，这些库不需要存在于 index.html 中吗？

Answer 1

我的意见是：你应该使用 import 关键字，原因如下：

风格问题：它是 ES6 风格，Aurelia 有点强迫你使用它
可读性 很重要：其他开发人员会希望您使用 import，所以这可能会使他们感到困惑
同样，import 负责加载它，因此如果您只添加一个脚本标记，您可能会添加一些 import，然后可能会重新声明一些函数。
美：我觉得你的代码里有100个<script>标签不是很漂亮
生产捆绑。你打算用 Grunt 或 Gulp 连接和丑化所有这些吗？如果是这样，那就是额外的工作，因为在默认配置中它是开箱即用的。如果没有...嗯，不，你应该这样做
Rollup。最甜蜜的部分来了。

JSPM is awesome! It's a little different to this project though – it combines a repository with a package manager and a client-side module loader, as opposed to simply bundling modules. JSPM allows you to use any module format and even develop without a build step, so it's a great choice for creating applications. Rollup generates smaller bundles that don't use the complex SystemJS format, and so is a better choice for creating libraries. A future version of JSPM may use Rollup internally, so you'll get the best of both worlds.

Rollup 是使用 import 的另一个 pro。它的作用是提取您使用的库并获取您需要的最少代码量，因此如果您只需要来自 jQuery 的一些东西，您不需要让访问者下载 50KB（或现在多少钱？）。

您可以阅读有关 Rollup 的更多信息 here。

JSPM - 是否有 advantages/disadvantages 使用导入与使用脚本标记包含客户端库文件？

JSPM - Are there any advantages/disadvantages in including client side library files using import vs using the script tag?

javascript

import

aurelia