sample_with_requireJS.html

Question

我在客户网站上写了一个JS插件，可以通过CORS方法从我们的数据库加载评论。

我的目标是将整个代码包装成一个易于嵌入的插件。

就像facebook js插件，Google Analytics插件一样。它们很容易安装在网站上。

我的插件依赖于其他库，例如jquery，下划线，主干，把手，还有我的脚本和CSS。我研究Require.js这对我来说似乎很合适。

我需要生成一个多合一的javascript插件，例如。 “真棒-comments.min.js”。

有些文章建议我将所有依赖的js文件放在require.config。

但是我不知道我怎么能用require.js做其他东西，比如我的js脚本。

是否有任何类似的应用程序或教程具有相同的功能。感谢。

sample_with_requireJS.html

<html>
<head>
    <script src="js/require.js" data-main="js/main"></script>
</head>
<body>
<div id="load_awesome_comments"></div>
</body>
</html>

JS / main.js

　　require.config({
　　　　baseUrl: "http://mywebsite/assets/",
　　　　paths: {
　　　　　　"jquery": "jquery-9e7b5a8e0157d7776b987d8963c9c786.js?body=1",
　　　　　　"underscor": "~~~",
  ...
　　　　}
　　});

sample-without-requireJS.html（这是我当前可用的html示例，混合了js，css和html DOM）

    <html>
    <head>
        <meta charset="utf-8">
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"/>
        <script src="http://localhost:3001/assets/jquery-9e7b5a8e0157d7776b987d8963c9c786.js?body=1" data-turbolinks-track="true"></script>

    <style>
    body {
        /*background-color: linen;*/
    }
    </style>

    <script type="text/javascript">

    $(document).ready(function() {
        $(document).on('click','.show-more',function () {
            var $this = $(this);
            ....
        });
    });


      window.onload = function(){
        .....
      }

      Handlebars.registerHelper('if_even', function(conditional, options) {
        ....
      });



    </script>

    <!-- Setup our templates -->

    </head>
    <body>
    <div id="load_awesome_comments"></div>
    <script type="text/javascript">
        $(document).ready(function() {
            function hideFurtherComments(){
                .....
            }

            var Comment = Backbone.Model.extend({
                ....

            });

            var Comments = Backbone.Collection.extend({
                model: Comment,
                url: fetch_comments_url,
                initialize: function() {
                    ....
                },
                deferred: Function.constructor.prototype,
                fetchSuccess: function(collection, response) {
                    collection.deferred.resolve();
                },

            });

            var comments = new Comments();
            var CommentView = Backbone.View.extend({
                el: $("#comments_section"),
                render: function() {
                  ....
                },
            });

            var EmptyCommentView = Backbone.View.extend({
                el: $("#empty_comments_list"),
                render: function() {
                  ....
                },
            });

            var commentView = new CommentView({
                collection: comments
            });
            var emptyCommentView = new EmptyCommentView({
                collection: comments
            });

            comments.deferred.done(function() {
                ....
            });

        });
        var og_url = $("meta[property='og:url']").attr("content");
        $("#original_news_article_link").attr("href", og_url)

    </script>
    <script src="js/require.js" defer async="true" ></script>
    </body>

    </html>

Answer 1

查看https://webpack.github.io和http://browserify.org/。他们的目的是做你需要的。您将所有Javascript代码，Javascript依赖项和CSS打包在一个唯一的JavaScript文件中。

此方法的优点是用户可以通过包含单个JavaScript文件来使用您的模块;无需担心依赖性。

缺点是，鉴于依赖项都包含在单个文件中，如果在页面中有三个模块以这种方式打包使用jQuery，例如， jQuery代码将被下载三次< / em>的

我如何将所有js文件，CSS，嵌入式脚本打包到js插件中

sample_with_requireJS.html

JS / main.js

sample-without-requireJS.html（这是我当前可用的html示例，混合了js，css和html DOM）

1 个答案: