Yii2：如何通过composer添加JavaScript库？

Question

我按照这个（安装Yii）指南设置了一个基本应用程序，没有任何问题。根据指南，我还全局地向composer.phar添加了fxp/composer-asset-plugin，也没有问题。

现在我需要使用q.js，它作为npm软件包托管。但我不知道如何通过composer添加它。我知道我可以使用CDN或手动下载和存储它。但我更喜欢使用composer。那么我该怎么做才能使其工作？

我已将以下内容添加到我的composer.json文件中:

"require": {
    "php": ">=5.4.0",
    "yiisoft/yii2": ">=2.0.4",
    "yiisoft/yii2-bootstrap": "*",
    "yiisoft/yii2-swiftmailer": "*",
    "npm-asset/q": "~1.4"               <------
},

我运行了composer.phar update命令，但出现了异常：

Your requirements could not be resolved to an installable set of packages.

    Problem 1
    - The requested package npm-asset/q could not be found in any version, 
      there may be a typo in the package name.

这是一种错误的方法吗？

总体上，我想知道如何将JS库添加到项目中。我只知道我必须稍后将其添加到资产中，但目前我无法获取JS文件。

*“托管”是正确的术语吗？

- robsch

---

现在，我尝试使用bower，并且它起作用了：在命令行上运行composer.phar require "bower-asset/q"下载了库并通过将"bower-asset/q": "^2.0"添加到require部分来更新了composer.json。现在我不知道npm是否有问题或者我做错了什么... - robsch

Answer 1

目前在 composer.json 中引用 npm 或 bower 的包最简单的方法是使用asset-packagist：

1. Remove fxp/composer-asset-plugin:

   composer global remove fxp/composer-asset-plugin
   

2. Add repository to your composer.json:

   "repositories": [
       {
           "type": "composer",
           "url": "https://asset-packagist.org"
       }
   ]
   

然后您应该能够在composer.json中使用npm-asset/前缀要求npm包，并且使用bower-asset/前缀要求bower包：

"require": {
    "bower-asset/bootstrap": "^3.3",
    "npm-asset/jquery": "^2.2"
}

无需全局插件，composer更新速度更快。

- rob006

Answer 2

最佳流程是在您的资产/AppAsset.php文件中进行一些更改。

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $js = [
        'js\your_file_name.js',
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

在您的网站目录中创建js文件夹，并将js文件放入其中。

要包含js文件，您需要：

$this->registerJsFile(Yii::$app->request->baseUrl.'/js/your_file_name.js');

- Arpit Aggarwal

---

是的，我已经知道了。问题是如何通过composer获取js文件。获取后，它应该在vendor目录中可见。 - robsch

Answer 3

对于作者来说可能有点晚，但我想这可能会帮助其他人。

Composer

除非您的库已经安装了composer（也就是在其根目录下包含了packagist.org所需的composer.json文件），否则您无法以合理的方式通过composer来包含它。

然而，包含CDN库很容易，并且最好使用AssetBundle进行操作，如下所示：

<?php

namespace frontend\assets;

use yii\web\AssetBundle;

/**
 * Main frontend application asset bundle.
 */
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        '//fonts.googleapis.com/css?family=Open+Sans:400,600&amp;subset=cyrillic,cyrillic-ext',
        '//cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css'
    ];
    public $js = [
    ];
    public $depends = [
        'yii\web\YiiAsset',
    ];
}

链接供应商基础 JS

通过composer安装的JS库可能看起来很棘手，因为vendor不是一个可访问的web文件夹，但在Yii2中实际上非常简单。

Yii2 AssetBundle提供了sourcePath选项，允许您链接到一个不可访问的目录（如vendor）。

Yii会在@web/assets/文件夹中为您发布包含的文件，并在运行时链接到它。

这里是jquery.cookie的一个工作示例：

<?php

namespace frontend\assets;

use yii\web\AssetBundle;

/**
 * Class JqueryCookieAsset
 *
 * @package frontend\assets
 */
class JqueryCookieAsset extends AssetBundle
{
    public $sourcePath = '@vendor/components/jquery-cookie';

    public $js = [
        'jquery.cookie.js'
    ];
}

- nssmart