README

Yii2 资源编译

原理

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

以下给出原理：使用 webpack 来处理将 JS6 文件进行转换。

为什么要使用.js6 作为后缀？

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

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

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

相关链接

• Yii2 资源转换
• 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. 配置

在 package.json

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

在 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. 配置

在 package.json

{
  "browserslist": [
    "defaults"
  ]
}

1. 增加 Less 命令

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

链接

• less
• less 插件
• 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"

链接

• stylus
• stylus 命令