kriss/yii2-asset-compile

Yii2 Asset Compile

v1.0 2019-12-16 09:17 UTC

Requires

• yiisoft/yii2: ~2.0.0

MIT

• kriss

• extension
• yii2

README

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
• babel
• webpack

各种工具的配置与使用

ES6/ES7 -> 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

1. 配置

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" }
    ]
  }
}

1. 增加命令

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

Less

1. 安装依赖

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

1. 配置

in package.json

{
  "browserslist": [
    "defaults"
  ]
}

1. 增加 Less 命令

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

Links

• less
• less plugin
• browsersList for autoPrefix

Stylus

1. 安装依赖

yarn add stylus --dev

1. 增加 Stylus 命令

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

1. Stylus 中的 import

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

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

Links

• stylus
• stylus command