Yii2:如何通过作曲家添加 JavaScript 库

Question

我已经根据本指南（安装 Yii）设置了一个基本应用程序。这没问题。根据该指南，我还在全球范围内将fxp/composer-asset-plugin添加到composer.phar。也没有问题。

现在我有使用 q.js 的要求，它作为 npm 包托管*。但我不知道如何通过作曲家添加它。我知道我可能会使用 CDN 代替或手动下载和存储它。但我更喜欢使用作曲家。那么我该怎么做才能完成这项工作呢？

我已将其添加到我的作曲家.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 文件。

* 托管是正确的术语吗？

Answer 1

目前在

composer.json 中要求 npm 或 bower 包的最简单方法是使用 asset-packagist：

1. 删除fxp/composer-asset-plugin ：

   composer global remove fxp/composer-asset-plugin
   

2. 将存储库添加到您的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"
}

无需全局插件和更快的作曲家更新。

Answer 2

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

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $js = [
        'jsyour_file_name.js',
    ];
    public $depends = [
        'yiiwebYiiAsset',
        'yiibootstrapBootstrapAsset',
    ];
}

并在您的网络目录中制作JS文件夹，并在其中放置您的JS文件。

要包含 js 文件，您需要：

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

Answer 3

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

作曲家

除非您的库具有作曲家设置（即 - 在其根目录中包含 composer.json 以及 packagist.org 所需的信息），否则您无法通过作曲家以体面的方式包含它。

但是，包含CDN库很容易，最好使用AssetBudle进行，如下所示：

<?php
namespace frontendassets;
use yiiwebAssetBundle;
/**
 * 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 = [
        'yiiwebYiiAsset',
    ];
}

链接基于供应商的 JS

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

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

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

以下是jquery.cookie的一个工作示例：

<?php
namespace frontendassets;
use yiiwebAssetBundle;
/**
 * Class JqueryCookieAsset
 *
 * @package frontendassets
 */
class JqueryCookieAsset extends AssetBundle
{
    public $sourcePath = '@vendor/components/jquery-cookie';
    public $js = [
        'jquery.cookie.js'
    ];
}