Yii2: How can I add an JavaScript library via composer?

Question

I have setup a basic app according to this guide (Installing Yii) . This is no problem. According to the guide I have also added fxp/composer-asset-plugin globally to composer.phar. Also no problem.

Now I've got the requirement to work with q.js which is hosted* as npm package . But I don't know how to add it via composer. I know I could probably use a CDN instead or download and store it manually. But I prefer using composer. So what do I have to do to make this work?

I have added this to my composer.json:

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

and called composer.phar update but got the exception:

 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. 

Is it a wrong approach?

I'd like to know in general how to add JS libraries to the project. I just know that I have to add it later to an Asset as well, but currently I'm not able to get the JS file in the first place.

* Is hosted the correct term?

Answer 1

Currently the easiest way to require npm or bower package in composer.json is to use 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" } ] 

Then you should be able to require npm package with npm-asset/ prefix and bower package with bower-asset/ prefix in composer.json :

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

No need for global plugin and much faster composer updates.

Answer 2

Best process is to make some changes in your asset/AppAsset.php file.

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',
    ];
}

and in your web directory make js folder and inside that put your js file.

To include js file you need :

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

Answer 3

May be a little late for the author, but might help others, I guess.

Composer

Unless your library has a composer setup (that is - included composer.json in its root with info required by packagist.org), you cannot include it via composer in a decent manner.

Including CDN libraries, however, is easy and is best made using AssetBudle, like that:

<?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',
    ];
}

Linking vendor-base JS

Linking to JS libraries installed via composer might seem tricky, since vendor is not a web-accessible folder, but is actually very simple with Yii2.

Yii2 AssetBundle provides a sourcePath option that allows you to link to a directory that is not web-accessible (such as vendor).

Yii will publish the included files for you in the @web/assets/ folder and link to it at runtime.

Here is a working example for 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'
    ];
}