PHP Yii Framework_php 기술의 프런트엔드 리소스 패키지 사용에 대한 자세한 설명

Yii의 리소스는 웹 페이지와 관련된 파일로 CSS 파일, JavaScript 파일, 이미지 또는 비디오 등이 될 수 있습니다. 리소스는 웹에 액세스할 수 있는 디렉터리에 배치되며 웹 서버에서 직접 호출됩니다.

예를 들어, 페이지에서 yiijuiDatePicker 위젯을 사용하면 필요한 CSS 및 JavaScript 파일을 수동으로 찾아서 포함시키는 대신 자동으로 리소스를 관리하는 것이 좋습니다. 위젯을 업그레이드하면 자동으로 새 버전의 리소스 파일이 사용됩니다. 이 튜토리얼에서는 Yii가 제공하는 강력한 리소스 관리 기능을 자세히 설명합니다.

리소스팩

Yii는 리소스 패키지에서 리소스를 관리합니다. 리소스 패키지는 단순히 디렉터리에 있는 리소스 모음입니다. 리소스 패키지가 뷰에 등록되면 웹 페이지를 렌더링할 때 패키지의 CSS 및 JavaScript 파일이 포함됩니다.

리소스 패키지 정의

리소스 패키지는 yiiwebAssetBundle을 상속하는 PHP 클래스로 지정됩니다. 패키지 이름은 자동으로 로드할 수 있는 PHP 클래스 이름이며, 리소스 패키지 클래스에는 CSS 및 JavaScript가 포함된 리소스의 위치를 ​​지정해야 합니다. 포함된 파일 및 다른 패키지와의 종속성.

다음 코드는 기본 애플리케이션 템플릿에서 사용되는 기본 리소스 패키지를 정의합니다.

<&#63;php

namespace app\assets;

use yii\web\AssetBundle;

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

위와 같이 AppAsset 클래스에서 지정한 리소스 파일은 @webroot 디렉터리에 위치하며 해당 URL은 @web입니다. 리소스 패키지에는 JavaScript 파일이 아닌 CSS 파일인 css/site.css가 포함되어 있습니다. 다른 두 패키지 yiiwebYiiAsset 및 yiibootstrapBootstrapAsset 정보 yiiwebAssetBundle의 속성에 대한 자세한 내용은 아래에 설명되어 있습니다.

• yiiwebAssetBundle::sourcePath: 리소스 파일이 포함된 번들의 루트 디렉터리를 지정합니다. 웹에서 루트 디렉터리에 액세스할 수 없는 경우 이 속성을 설정해야 합니다. 그렇지 않으면 yiiwebAssetBundle::basePath 속성과 yiiwebAssetBundle::baseUrl을 설정해야 합니다. 세트. 여기에서 경로 별칭을 사용할 수 있습니다.
• yiiwebAssetBundle::basePath: 리소스 번들의 리소스 파일을 포함하고 웹에서 액세스할 수 있는 디렉터리를 지정합니다. yiiwebAssetBundle::sourcePath 속성을 지정하면 리소스 관리자가 패키지의 리소스를 웹에서 액세스할 수 있는 디렉터리에 게시합니다. 리소스 파일이 웹에서 액세스할 수 있는 디렉터리에 있는 경우 다시 게시할 필요가 없도록 이 속성을 설정해야 합니다. 여기서 경로 별칭을 사용할 수 있습니다.

yiiwebAssetBundle::baseUrl: yiiwebAssetBundle::basePath 디렉터리에 해당하는 URL을 지정합니다. yiiwebAssetBundle::basePath 속성을 지정하면 리소스 관리자가 이러한 리소스를 게시하고 이 속성을 재정의합니다. 여기서 경로 별칭을 사용할 수 있습니다.
yiiwebAssetBundle::js: 리소스 번들의 JavaScript 파일을 포함하는 배열입니다. 슬래시 "/"를 디렉터리 구분 기호로 사용해야 합니다. 각 JavaScript 파일은 다음 두 가지 형식 중 하나로 지정할 수 있습니다.

상대 경로는 로컬 JavaScript 파일(예: js/main.js)로 표시됩니다. 파일의 실제 경로 앞에는 yiiwebAssetManager::basePath가 있습니다. 파일의 실제 URL 앞에는 yiiwebAssetManager::baseUrl이 있습니다. .
절대 URL 주소는 http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js 또는 //ajax.googleapis.com/ajax와 같은 외부 JavaScript 파일로 표시됩니다. /libs /jquery/2.1.1/jquery.min.js.
yiiwebAssetBundle::css: 리소스 번들의 JavaScript 파일을 포함하는 배열입니다. 배열 형식은 yiiwebAssetBundle::js와 동일합니다.
yiiwebAssetBundle::dependents: 이 리소스 번들이 의존하는 다른 리소스 번들 목록입니다(자세한 소개는 다음 두 섹션에서).
yiiwebAssetBundle::jsOptions: yiiwebView::registerJsFile()을 호출하여 번들의 각 JavaScript 파일을 등록할 때 이 메서드에 전달되는 옵션을 지정합니다.
yiiwebAssetBundle::cssOptions: yiiwebView::registerCssFile()을 호출하여 번들의 각 CSS 파일을 등록할 때 이 메서드에 전달되는 옵션을 지정합니다.
yiiwebAssetBundle::publishOptions: yiiwebAssetManager::publish()를 호출하여 패키지 리소스 파일을 웹 디렉터리에 게시할 때 이 메서드에 전달되는 옵션을 지정합니다. yiiwebAssetBundle::sourcePath 속성이 지정된 경우에만 사용됩니다.

리소스 위치

리소스 게시: 리소스 파일은 웹을 통해 직접 액세스할 수 있는 웹 디렉터리에 배치됩니다.
외부 리소스: 리소스 파일은 웹 애플리케이션과 다른 웹 서버에 배치됩니다.
리소스 번들 클래스를 정의할 때 yiiwebAssetBundle::sourcePath 속성을 지정하면 상대 경로를 사용하는 모든 리소스가 소스 리소스로 사용된다는 의미입니다. 이 속성을 지정하지 않으면 해당 리소스가 게시된 리소스라는 의미입니다. yiiwebAssetBundle::basePath를 지정하고 yiiwebAssetBundle::baseUrl을 Yii에게 알려야 합니다.

리소스 종속성

리소스 옵션

可指定yii\web\AssetBundle::cssOptions 和 yii\web\AssetBundle::jsOptions 属性来自定义页面包含CSS和JavaScript文件的方式， 这些属性值会分别传递给 yii\web\View::registerCssFile() 和 yii\web\View::registerJsFile() 方法， 在视图 调用这些方法包含CSS和JavaScript文件时。

注意: 在资源包类中设置的选项会应用到该包中 每个 CSS/JavaScript 文件，如果想对每个文件使用不同的选项， 应创建不同的资源包并在每个包中使用一个选项集。
例如，只想IE9或更高的浏览器包含一个CSS文件，可以使用如下选项：

public $cssOptions = ['condition' => 'lte IE9'];

这会是包中的CSS文件使用以下HTML标签包含进来：

<!--[if lte IE9]>
<link rel="stylesheet" href="path/to/foo.css">
<![endif]-->

为链接标签包含

public $cssOptions = ['noscript' => true];

为使JavaScript文件包含在页面head区域（JavaScript文件默认包含在body的结束处）使用以下选项：

public $jsOptions = ['position' => \yii\web\View::POS_HEAD];

Bower 和 NPM 资源

大多数 JavaScript/CSS 包通过Bower 和/或 NPM管理， 如果你的应用或扩展使用这些包，推荐你遵循以下步骤来管理库中的资源：

修改应用或扩展的 composer.json 文件将包列入require 中， 应使用bower-asset/PackageName (Bower包) 或 npm-asset/PackageName (NPM包)来对应库。
创建一个资源包类并将你的应用或扩展要使用的JavaScript/CSS 文件列入到类中， 应设置 yii\web\AssetBundle::sourcePath 属性为@bower/PackageName 或 @npm/PackageName， 因为根据别名Composer会安装Bower或NPM包到对应的目录下。
注意: 一些包会将它们分布式文件放到一个子目录中，对于这种情况，应指定子目录作为 yii\web\AssetBundle::sourcePath属性值，例如，yii\web\JqueryAsset使用 @bower/jquery/dist 而不是 @bower/jquery。
使用资源包

为使用资源包，在视图中调用yii\web\AssetBundle::register()方法先注册资源， 例如，在视图模板可使用如下代码注册资源包：

use app\assets\AppAsset;
AppAsset::register($this); // $this 代表视图对象

如果在其他地方注册资源包，应提供视图对象，如在 小部件 类中注册资源包， 可以通过 $this->view 获取视图对象。

当在视图中注册一个资源包时，在背后Yii会注册它所依赖的资源包，如果资源包是放在Web不可访问的目录下，会被发布到可访问的目录， 后续当视图渲染页面时，会生成这些注册包包含的CSS和JavaScript文件对应的 和