npm - Yii2: How can I add an JavaScript library via composer? - Stack Overflow

admin管理员组

文章数量:1391968

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/poser-asset-plugin globally to poser.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 poser. I know I could probably use a CDN instead or download and store it manually. But I prefer using poser. So what do I have to do to make this work?

I have added this to my poser.json:

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

and called poser.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?

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/poser-asset-plugin globally to poser.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 poser. I know I could probably use a CDN instead or download and store it manually. But I prefer using poser. So what do I have to do to make this work?

I have added this to my poser.json:

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

and called poser.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?

• javascript
• npm
• poser-php
• yii2

Share Improve this question Follow edited Jun 17, 2015 at 11:20 robsch asked Jun 17, 2015 at 10:30 robschrobsch 9,7281010 gold badges6969 silver badges107107 bronze badges 1

• Now, I tried it with bower and that worked: poser.phar require "bower-asset/q" on the mand line downloaded the library and updated poser.json by adding "bower-asset/q": "^2.0" into the require section. Now I don't know whether npm has a problem or whether I did anything wrong.... – robsch Commented Jun 17, 2015 at 12:37

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Currently the easiest way to require npm or bower package in poser.json is to use asset-packagist:

1. Remove fxp/poser-asset-plugin:

   poser global remove fxp/poser-asset-plugin
   

2. Add repository to your poser.json:

   "repositories": [
       {
           "type": "poser",
           "url": "https://asset-packagist"
       }
   ]
   

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

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

No need for global plugin and much faster poser updates.

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');

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

Composer

Unless your library has a poser setup (that is - included poser.json in its root with info required by packagist), you cannot include it via poser 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./css?family=Open+Sans:400,600&amp;subset=cyrillic,cyrillic-ext',
        '//cdn.jsdelivr/npm/[email protected]/dist/pretty-checkbox.min.css'
    ];
    public $js = [
    ];
    public $depends = [
        'yii\web\YiiAsset',
    ];
}

Linking vendor-base JS

Linking to JS libraries installed via poser 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/ponents/jquery-cookie';

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

本文标签： npmYii2 How can I add an JavaScript library via composerStack Overflow