README

这是一个使用 NPM 与 Yii 2 的示例。

composer create-project --stability=dev tanakahisateru/yii2-app-basic-npm

现在您可以通过 NPM 无缝地安装 Gulp 或类似工具！

修改点

composer.json

添加了 provide 部分，以跳过在 Composer 处理过程中它们。预期卸载 fxp-composer-asset-plugin。

{
    "provide": {
        "bower-asset/jquery": "*",
        "bower-asset/jquery.inputmask": "*",
        "bower-asset/bootstrap": "*",
        "bower-asset/punycode": "*",
        "bower-asset/typeahead.js": "*",
        "bower-asset/yii2-pjax": "*"
    },
    "scripts": {
        "post-install-cmd": [
            "yii\\composer\\Installer::postInstall",
            "npm install"
        ],
        "post-create-project-cmd": [
            "yii\\composer\\Installer::postCreateProject",
            "yii\\composer\\Installer::postInstall",
            "npm install"
        ]
    }
}

package.json

NPM 替代方案。

{
  "dependencies": {
    "bootstrap": "^3.3.7",
    "jquery": "^2.2.4",
    "jquery.inputmask": "^3.3.4",
    "punycode": "^2.1.0",
    "typeahead.js": "^0.11.1",
    "yii2-pjax": "^2.0.6"
  },
  "devDependencies": {},
  "private": true
}

config/web.php

<?php
$config = [
    // standard paths for Bower and NPM
    'aliases' => [
        '@bower' => '@app/components',
        '@npm'   => '@app/node_modules',
    ],
    'components' => [    
        // assetManager settings added
        'assetManager' => [
            'bundles' => array_merge(
                require(__DIR__ . '/assets-default.php'),
                require(__DIR__ . '/assets-extended.php')
            ),
        ],
    ],
];

config/assets-default.php

AssetManager 的 bundles 设置可以修改 AssetBundle 的默认属性。

<?php
return [
    'yii\web\JqueryAsset' => [
        'sourcePath' => '@npm/jquery/dist',
        'js' => [
            'jquery.js',
        ],
    ],
    'yii\bootstrap\BootstrapAsset' => [
        'sourcePath' => '@npm/bootstrap/dist',
        'css' => [
            'css/bootstrap.css',
        ],
    ],
    'yii\bootstrap\BootstrapPluginAsset' => [
        'sourcePath' => '@npm/bootstrap/dist',
        'js' => [
            'js/bootstrap.js',
        ],
    ],
    'yii\bootstrap\BootstrapThemeAsset' => [
        'sourcePath' => '@npm/bootstrap/dist',
        'css' => [
            'css/bootstrap-theme.css',
        ],
    ],
    'yii\widgets\MaskedInputAsset' => [
        'sourcePath' => '@npm/jquery.inputmask/dist',
        'js' => [
            'jquery.inputmask.bundle.js',
        ],
    ],
    'yii\validators\PunycodeAsset' => [
        'sourcePath' => '@npm/punycode/dist',
        'js' => [
            'punycode.js',
        ],
    ],
    'yii\gii\TypeAheadAsset' => [
        'sourcePath' => '@npm/typeahead.js/dist',
        'js' => [
            'typeahead.bundle.js',
        ],
    ],
    'yii\widgets\PjaxAsset' => [
        'sourcePath' => '@npm/yii2-pjax',
        'js' => [
            'jquery.pjax.js',
        ],
    ],
];

(简单形式：)

<?php
return [
    'yii\web\JqueryAsset'                => ['sourcePath' => '@npm/jquery/dist'],
    'yii\bootstrap\BootstrapAsset'       => ['sourcePath' => '@npm/bootstrap/dist'],
    'yii\bootstrap\BootstrapPluginAsset' => ['sourcePath' => '@npm/bootstrap/dist'],
    'yii\bootstrap\BootstrapThemeAsset'  => ['sourcePath' => '@npm/bootstrap/dist'],
    'yii\widgets\MaskedInputAsset'       => ['sourcePath' => '@npm/jquery.inputmask/dist'],
    'yii\validators\PunycodeAsset'       => ['sourcePath' => '@npm/punycode/dist'],
    'yii\gii\TypeAheadAsset'             => ['sourcePath' => '@npm/typeahead.js/dist'],
    'yii\widgets\PjaxAsset'              => ['sourcePath' => '@npm/yii2-pjax'],
];

已知问题

由于 Gii 和 Debug 模块将替换为 app\modules\* 类，因为它们重置了配置的 AssetManager。

提示

要使用编译后的资源而不是源文件，您可以创建跳过链接的 asset-*.php 版本。

<?php
return [
    'foo\bar\BarAsset' => [
        'sourcePath' => '@app/assets/dist/bar',  // built resources
        'js' => [],   // No JS
        'css' => [],  // No CSS
    ],
];