README

Component Installer 已被弃用。请使用以下项目之一代替

Composer Installers Extender
Asset Packagist
Composer Asset Plugin
Laravel Mix（示例： eventum/eventum#801 和 eventum/eventum#812）

示例

composer require oomphinc/composer-installers-extender

  "extra": {
    "installer-types": ["component"],
    "installer-paths": {
      "components/{$name}/": ["type:component"]
    }
  }

为 Composer 的

允许通过 Composer 安装组件。

安装

composer require robloach/component-installer

{
    "require": {
        "robloach/component-installer": "*"
    }
}

用法

要使用 Composer 安装组件，请将组件添加到您的 composer.json 文件的 require 键中。以下示例将安装 jQuery 和 normalize.css

composer require components/jquery
composer require components/normalize.css

{
    "require": {
        "components/jquery": "2.*",
        "components/normalize.css": "3.*",
        "robloach/component-installer": "*"
    }
}

使用组件

最简单的方法是静态地使用组件。只需使用 script 或 link 标签手动引用组件即可

<script src="components/jquery/jquery.js"></script>
<link href="components/normalize/normalize.css" rel="stylesheet">

对于复杂的项目，提供了一个 RequireJS 配置，它允许在需要时自动加载脚本。还会编译一个 require.css 文件，包括所有组件样式表

<!DOCTYPE html>
<html>
    <head>
        <link href="components/require.css" rel="stylesheet" type="text/css">
        <script src="components/require.js"></script>
    </head>
    <body>
        <h1>jQuery+RequireJS Component Installer Sample Page</h1>
        <script>
          require(['jquery'], function($) {
            $('body').css('background-color', 'green');
          });
        </script>
    </body>
</html>

配置

有多种方法可以更改组件的安装和使用方式。

安装目录

您可以通过更改根 composer.json 文件的 config 中的 component-dir 选项来切换组件的安装位置。以下示例将 jQuery 安装到 public/jquery 而不是 components/jquery

{
    "require": {
        "components/jquery": "*"
    },
    "config": {
        "component-dir": "public"
    }
}

默认为 components。

基本 URL

虽然 component-dir 描述了组件将被安装的位置，但 component-baseurl 告诉 RequireJS 当在浏览器中尝试加载脚本时要使用的基路径。确保在加载外部内容时 component-baseurl 指向 component-dir。有关 baseUrl 的更多信息，请参阅 RequireJS 文档中的 baseUrl

{
    "require": {
        "components/jquery": "*"
    },
    "config": {
        "component-dir": "public/assets",
        "component-baseurl": "/assets"
    }
}

默认为 components。

Assetic 过滤器

{
    "require": {
        "components/jquery": "*"
    },
    "config": {
        "component-dir": "public/assets",
        "component-baseurl": "/assets",
        "component-scriptFilters": {
            "\\Assetic\\Filter\\GoogleClosure\\CompilerApiFilter": []
        },
        "component-styleFilters": {
            "\\Assetic\\Filter\\CssImportFilter": []
        }
    }
}

创建组件

为了将组件与组件安装器一起安装，需要使它 require 包 robloach/component-installer 并将 type 设置为 component，但这不是必需的

{
    "name": "components/bootstrap",
    "type": "component",
    "require": {
        "robloach/component-installer": "*"
    },
    "extra": {
        "component": {
            "scripts": [
                "js/bootstrap.js"
            ],
            "styles": [
                "css/bootstrap.css"
            ],
            "files": [
                "img/*.png",
                "js/bootstrap.min.js",
                "css/bootstrap.min.css"
            ]
        }
    }
}

scripts - 将在加载组件时连接在一起并处理的 JavaScript 文件列表。
styles - 应该连接到最终的 require.css 文件的所有 CSS 文件列表。
files - 应该复制到组件目录中的任何其他文件资产。

组件名称

组件可以提供自己的组件名称。以下示例将 jQuery 安装到 components/myownjquery 而不是 components/jquery

{
    "name": "components/jquery",
    "type": "component",
    "extra": {
        "component": {
            "name": "myownjquery"
        }
    }
}

默认为包名，不带供应商。

RequireJS 配置

通过更改一些配置选项，组件可以更改如何由 RequireJS 注册和与之交互

{
    "name": "components/backbone",
    "type": "component",
    "require": {
        "components/underscore": "*"
    },
    "extra": {
        "component": {
            "shim": {
                "deps": ["underscore", "jquery"],
                "exports": "Backbone"
            },
            "config": {
                "color": "blue"
            }
        }
    },
    "config": {
        "component": {
            "waitSeconds": 5
        }
    }
}

为单个包当前可用的 RequireJS 选项包括

shim
config
通过 config.component 传递的任何内容都会发送到 Require.js

没有 Composer 支持的包

在 composer.json 中使用 repositories 允许在未显式提供自己的 composer.json 的包中使用组件安装器。在以下示例中，我们定义了 html5shiv 的使用

{
    "require": {
        "afarkas/html5shiv": "3.6.*"
    },
    "repositories": [
        {
            "type": "package",
            "package": {
                "name": "afarkas/html5shiv",
                "type": "component",
                "version": "3.6.2",
                "dist": {
                    "url": "https://github.com/aFarkas/html5shiv/archive/3.6.2.zip",
                    "type": "zip"
                },
                "source": {
                    "url": "https://github.com/aFarkas/html5shiv.git",
                    "type": "git",
                    "reference": "3.6.2"
                },
                "extra": {
                    "component": {
                        "scripts": [
                            "dist/html5shiv.js"
                        ]
                    }
                },
                "require": {
                    "robloach/component-installer": "*"
                }
            }
        }
    ]
}

在 composer.json 中没有组件支持的包

在 composer.json 中使用 extra 允许在未显式提供组件支持但包含自己的 composer.json 的包中使用组件安装器。使用带有组件安装器的包的 extra 将覆盖该包的组件设置。

{
    "require": {
        "datatables/datatables": "~1.10"
    },
    "extra": {
        "component": {
            "datatables/datatables": {
                "scripts": [
                    "media/js/jquery.dataTables.js"
                ],
                "styles": [
                    "media/css/jquery.dataTables.css"
                ],
                "files": [
                    "media/js/jquery.dataTables.min.js",
                    "media/css/jquery.dataTables.min.css",
                    "media/images/*.png"
                ]
            }
        }
    }
}

非原创

Component Installer 吸取了来自许多其他令人惊叹项目的灵感。鼓励查看一些其他优秀的包管理系统

许可证

Component Installer 在 MIT 许可证下许可 - 详细内容请参阅 LICENSE.md。

robloach / component-installer

维护者

详细信息