Javascript 如何将所有js文件、CSS和嵌入式脚本打包到js插件中_Javascript_Requirejs

Javascript 如何将所有js文件、CSS和嵌入式脚本打包到js插件中

javascript requirejs

Javascript 如何将所有js文件、CSS和嵌入式脚本打包到js插件中,javascript,requirejs,Javascript,Requirejs,我在客户端网站上写了一个JS插件，可以通过CORS方法从数据库中加载评论我的目标是将我的全部代码包装成一个易于嵌入的插件就像facebook js插件，谷歌分析插件。它们很容易安装在网站上我的插件依赖于其他库，比如jquery、下划线、主干、把手，还有我的脚本和CSS。我学习了Require.js似乎适合为我做这项工作我需要生成一个一体化的javascript插件，例如。，。“很棒的评论。min.js” 一些文章建议我将所有依赖的js文件放入require.config 但我不知道如何

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

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

就像facebook js插件，谷歌分析插件。它们很容易安装在网站上

我的插件依赖于其他库，比如jquery、下划线、主干、把手，还有我的脚本和CSS。我学习了

Require.js

似乎适合为我做这项工作

我需要生成一个一体化的javascript插件，例如。，。“很棒的评论。min.js”

一些文章建议我将所有依赖的js文件放入

require.config

但我不知道如何使用require.js完成其他工作，比如我的js脚本

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

带有_requireJS.html的_示例 sample-without-requireJS.html（这是我当前可用的html示例，混合了js、css和HTMLDOM）


身体{
/*背景色：亚麻布*/
}
$（文档）.ready（函数（）{
$（文档）。在（'单击'，'上。显示更多'，函数（）{
var$this=$（this）；
....
});
});
window.onload=函数（）{
.....
}
把手.注册表帮助器（'if_偶数'，功能（有条件，选项）{
....
});
$（文档）.ready（函数（）{
函数hideFurtherComments（）{
.....
}
var Comment=Backbone.Model.extend({
....
});
var Comments=Backbone.Collection.extend({
模式：评论，
url:fetch_comments_url，
初始化：函数（）{
....
},
延迟：Function.constructor.prototype，
fetchSuccess:函数（收集、响应）{
collection.deferred.resolve（）；
},
});
var comments=新注释（）；
var CommentView=Backbone.View.extend({
el:$（“#评论#部分”），
render:function（）{
....
},
});
var EmptyCommentView=Backbone.View.extend({
el:$（“空注释列表”），
render:function（）{
....
},
});
var commentView=新的commentView({
收藏：评论
});
var emptyCommentView=新的emptyCommentView({
收藏：评论
});
comments.deferred.done（函数（）{
....
});
});
var og_url=$（“meta[property='og:url']”）attr（“content”）；
$（“原创新闻文章链接”）.attr（“href”，og\uURL）

看一下和。他们的目的就是做你需要的事情。将所有Javascript代码、Javascript依赖项和CSS打包到一个单独的Javascript文件中

这种方法的优点是，用户只需包含一个JavaScript文件就可以使用您的模块；不需要担心依赖关系

缺点是，考虑到依赖项都包含在单个文件中，例如，如果在一个页面中有三个使用jQuery的模块，jQuery代码将被下载三次

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

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

    <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>