PHPackages                             kriss/yii2-asset-compile - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. kriss/yii2-asset-compile

ActiveYii2-extension[Utility & Helpers](/categories/utility)

kriss/yii2-asset-compile
========================

Yii2 Asset Compile

v1.0(6y ago)05MITPHP

Since Dec 16Pushed 5y ago1 watchersCompare

[ Source](https://github.com/krissss/yii2-asset-compile)[ Packagist](https://packagist.org/packages/kriss/yii2-asset-compile)[ RSS](/packages/kriss-yii2-asset-compile/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (1)Dependencies (1)Versions (2)Used By (0)

Yii2 Asset Compile
==================

[](#yii2-asset-compile)

Yii2 Asset Compile

原理
--

[](#原理)

使用Yii2的资源转化方式，在用户浏览页面前编辑处理文件。对于CSS预编译，使用Yii2提供的方式已经完全足够使用，对于JS， 如果使用TS也能转化，但是对于ES6及以上的转化官方未提供例子。

此处给出原理如下：使用 webpack 来处理将 JS6 文件进行转化。

> 为什么要使用`.js6` 做后缀？

因为使用相同后缀 js 生成 js，这行不通，所以需要一个独特的后缀来触发转化（你可以使用你喜欢的任何后缀）

> 为什么不单独使用 `babel`，而要使用`webpack`?

单独使用 babel 可以将 ES6/ES7 等转化为 ES5，事实上最终 webpack 也是使用 babel 来转化的，webpack 最大的作用在于 可以使用 `import` 和 `export` 来将多个 js 文件合并成一个（即代码的分离）

> 相关链接

- [Yii2 Asset Conversion](https://www.yiiframework.com/doc/guide/2.0/en/structure-assets#asset-conversion)
- [babel](https://babeljs.io/)
- [webpack](https://www.webpackjs.com/)

各种工具的配置与使用
----------

[](#各种工具的配置与使用)

### ES6/ES7 -> ES5

[](#es6es7---es5)

1. 安装依赖

```
# base
yarn add @babel/core babel-loader webpack webpack-cli --dev
# babel preset
yarn add @babel/preset-env --dev
# babel polyfill for IE
yarn add @babel/polyfill --dev
```

> 说明：

- 自行按需添加 preset，添加后配置文件需要做响应调整
- 此处为了兼容 IE，浏览器下需要使用 polyfill，可以使用 `kriss\assetCompile\BabelPolyfillAsset`

2. 配置

in `package.json`

```
{
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  }
}
```

in `webpack.config.js`，注意此处的 test 中的 `.js6`

```
module.exports = {
  module: {
    rules: [
      { test: /\.js6|\.js$/, exclude: /node_modules/, loader: "babel-loader" }
    ]
  }
}
```

2. 增加命令

```
'commands' => [
    'js6' => ['js', '@npm/.bin/webpack {from} -o {to}'],
    // others
],
```

### Less

[](#less)

1. 安装依赖

```
yarn add less less-plugin-autoprefix less-plugin-clean-css --dev
```

2. 配置

in `package.json`

```
{
  "browserslist": [
    "defaults"
  ]
}
```

3. 增加 Less 命令

```
'commands' => [
    'less' => ['css', '@npm/.bin/lessc {from} {to} --no-color --autoprefix --clean-css'],
    // others
],
```

> Links
>
> - [less](http://lesscss.cn/)
> - [less plugin](http://lesscss.cn/usage/#plugins)
> - [browsersList for autoPrefix](https://github.com/postcss/autoprefixer#browsers)

### Stylus

[](#stylus)

1. 安装依赖

```
yarn add stylus --dev
```

2. 增加 Stylus 命令

```
'commands' => [
    'styl' => ['css', '@npm/.bin/stylus --compress < {from} > {to}'],
    // others
],
```

3. Stylus 中的 import

使用`~`表示当前文件所在位置

```
@import "~/../common/flex.styl"
```

> Links
>
> - [stylus](https://stylus-lang.com/)
> - [stylus command](https://stylus-lang.com/docs/executable.html)

###  Health Score

24

—

LowBetter than 32% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity4

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity57

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

2340d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/b4053cfc9956b8c15b9bc4c9c7c2bad625d16d1b6d9191019b2a25cc0972d955?d=identicon)[kriss](/maintainers/kriss)

---

Top Contributors

[![krissss](https://avatars.githubusercontent.com/u/10680903?v=4)](https://github.com/krissss "krissss (2 commits)")

---

Tags

yii2extension

### Embed Badge

![Health badge](/badges/kriss-yii2-asset-compile/health.svg)

```
[![Health](https://phpackages.com/badges/kriss-yii2-asset-compile/health.svg)](https://phpackages.com/packages/kriss-yii2-asset-compile)
```

###  Alternatives

[vyants/yii2-daemon

Extension provides functionality for simple daemons creation and control

7859.0k](/packages/vyants-yii2-daemon)[dmstr/yii2-cookie-consent

Yii2 Cookie Consent Widget

1452.6k](/packages/dmstr-yii2-cookie-consent)[richardfan1126/yii2-js-register

Yii2 widget to register JS into view

1357.2k7](/packages/richardfan1126-yii2-js-register)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)