Question

我正在尝试对我的一些html页面进行组件化以使它们成为ractive组件并使用ractive-load加载它们。我不使用任何构建系统或＆＃34;工具＆＃34; （即grunt，browserify，require等）

我收到错误：

You can only have one <script> tag per component file

的index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Title</title>

    <!-- Javascript -->
    <script src="static/jquery-2.1.4/jquery-2.1.4.min.js"></script> 
    <script src='static/ractive-0.7.3/ractive.js'></script> 
    <script src='static/ractiveload/ractive-load.js' ></script> -->
    <script src='static/app.js' ></script> 

  </head>

  <body>

        <header>
                <a href='/'>My Title</a>
        </header> 

        <!-- This is a dynamic div that is loaded on-demand by ractive. -->
        <div class='wrapper' id='mainPanel'>
        </div>

  </body>
</html>

app.js：

$(document).ready(function(){

    Ractive.load('views/control.html').then( function(Control){
        var ractive = new Control({
            el: "#mainPanel",
        });
    }).

视图/ control.html：

<script type='text/javascript' src="static/some/lib.js"></script>
<script type='text/javascript' src="static/some/otherlib.js"></script>


<div>This is a test</div>

如何将其他JavaScript库加载到Ractive组件中？

Answer 1

使用单文件组件时，使用特殊的require功能。请注意，此功能不以任何方式与任何工具的实现相关联。但是，它可能是底层工具实现的抽象。

但组件规范提到require的行为取决于正在使用的加载器。在ractive-load的情况下，它的依赖管理不是很复杂。它的行为是在Ractive.load.modules或全局window中找到依赖项（如果在前面找不到它）。这只能意味着在您的应用加载之前，您的依赖项必须存在于两个位置中的任何一个位置。在从window加载的情况下，将您的依赖项添加为常规<script>标记应该有效。

如果您正在寻找更高级的组件文件依赖关系管理形式，而无需使用cli工具，那么您可以查看在RequireJS之上运行的rvc。

如何在ractive组件中加载外部JavaScript库？

1 个答案: