我怎样才能将所有js文件，CSS，嵌入式脚本打包到js插件中

How could I pack all js files, CSS , embedded scripts into a js plugin

本文关键字：js CSS 嵌入式 脚本 插件 文件      更新时间：2023-09-26

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

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

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

我的

插件依赖于其他库，例如jquery，underscore，backbone，handlebars，以及我的脚本和CSS。我研究了Require.js似乎适合我做这份工作。

我需要生成一个多合一的 JavaScript 插件，例如，。"真棒评论.min.js"。

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

但是我不知道我怎么能做其他事情，例如我的 js 脚本与 require.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>

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

这种方法的优点是用户只需包含单个 JavaScript 文件即可使用您的模块;无需担心依赖关系。

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

相关文章：