将 Salvatore 集成到我的 Aurelia 应用程序中答案

【问题标题】：Integrate Salvattore inside my Aurelia application将 Salvatore 集成到我的 Aurelia 应用程序中
【发布时间】：2019-05-31 10:26:58
【问题描述】：

我尝试将Salvattore（CSS 中的砌体替代品）集成到我的Aurelia 应用程序中，但不幸的是它不起作用。在尝试了很多事情之后，我感到很失望，并认为可能根本不可能让 Salvatore 在 Aurelia 应用程序中工作。

这就是我所做的：感谢 CLI au new，我创建了一个新的 Aurelia 项目，在这个项目中，我使用以下代码在我的 Aurelia 项目中创建了一个 html 页面：

<div id="grid" data-columns>
    <div>Item #1</div>
    <div>Item #2</div>
    <div>Item #3</div>
    <div>Item #4</div>
</div>

有了这个css：

#grid[data-columns]::before {
    content: '3 .column.size-1of3'; 
}

/* These are the classes that are going to be applied: */
.column { float: left; }
.size-1of3 { width: 33.333%; }

起初，我尝试简单地在我的 index.html 页面（就在 close body 标签上方）引用 Salvattore 的 js 代码，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>Aurelia</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, height=device-height />
  </head>

  <body aurelia-app="main">
    <script src="scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>
    <script src="javascript/salvattore.min.js"></script>
  </body>
</html>

它不起作用，我在控制台中遇到错误。

我还尝试通过npm install salvattore --save 安装Salvattore，并将其添加到aurelia.json 中。在main.ts 我试图引用它：import 'salvattore'; 但它也不起作用。我的意思是，这次没有错误，但什么也没发生。最后，感谢scriptinjector 组件，最后我尝试将 Salvattore js 脚本直接注入到我的页面中。再一次，它不起作用，什么也没发生。

我是否必须得出结论，Salvattore 与任何 Aurelia 项目根本不兼容？那样的话，你知道有什么替代方案吗？

下面是在基本 html 页面（不是 Aurelia）中使用 Salvattore 的示例代码笔

https://codepen.io/mitour/pen/wWMOvw

【问题讨论】：

这看起来与任何一个库都完全无关。它似乎更像是捆绑
您能帮忙在discourse中创建一个主题：discourse.aurelia.io并粘贴相关代码吗？
另外：您使用什么版本的 cli？什么样的项目？（网络包？）
最新的 CLI 版本。不使用 webpack，而是使用 CLI 内置的 Bundler 依赖管理。

标签： javascript aurelia

【解决方案1】：

您必须了解 cli bundler 是一个 AMD bundler。您的<script src="javascript/salvattore.min.js"></script> 低于vendor-bundle，因此当浏览器读取salvattore.min.js 时，AMD 加载程序（requirejs/systemjs）已经到位。这就是为什么 salvatore 尝试将自身加载为 AMD 模块而不是创建全局变量的原因。

您可以将salvattore.min.js 移动到vendor-bundle 脚本标签的上方。或者使用aurelia.json 中的 prepend，在 prepend 列表中 requirejs 之前添加 salvatore。

您可以尝试的另一件事是将其用作模块。不要在 html 中添加 script 标签，不要在前面添加它。但是将此行添加到您的main.js 或main.ts。

import "salvattore"; // this will load it as an AMD module

【讨论】：

我尝试了您的建议，但不幸的是它不起作用。对我的 hmtl 代码仍然没有影响。
好的，我只需调用位于 Salvattore 的 javascript 源文件中的 inìt 函数就可以了。我会尽快在这里发布我的解决方案。

【解决方案2】：

解决办法如下：

在 package.json 中添加"salvattore": "^1.0.9"
在 aurelia.json 中添加 "salvattore"

在您的打字稿页面 (.ts) 中：

 import * as salvattore from 'salvattore';

 export class MyPage {
     attached() {
         salvattore.init();
     } 
 }

【讨论】：