项目背景

使用 layui-admin 的传统java jsp项目

CSS 初步工程化

在前端三剑客（HTML、CSS、JavaScript）中，工程化 CSS 可以说是代价最小的且效果最明显的。

CSS 标准一直在演进，且不同浏览器中对 CSS 样式支持程度也不同。

使用 postcss 相关生态来处理 CSS。

postcss 是一套 JavaScript 工具和插件来转换 CSS 的工具，按需搭配并配置相关插件，可以将现代 CSS 转换到最大兼容目标平台的程度。

安装 nodejs、npm

对于 debian 及衍生版本

1

apt install node npm

安装 postcss-cli

1

npm i -D postcss-cli

该命令会在当前目录下生成package.json、package-lock.json

添加 postcss 相关插件

• postcss-import
  • 处理导入
• postcss-nested
  • 展开嵌套语法
• postcss-preset-env
  • 匹配目标浏览器
• autoprefixer
  • 添加平台特定前缀
• postcss-initial
  • 按需重置继承样式
• postcss-scrollbar
  • 滚动条兼容
• css-declaration-sorter
  • 规则排序
• cssnano
  • 最小化

1

npm i -D postcss-import postcss-nested postcss-preset-env autoprefixer postcss-initial postcss-scrollbar css-declaration-sorter cssnano

添加 postcss 配置

创建postcss.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

module.exports = {
    plugins:[
        // 处理导入
        require('postcss-import'),
        // 处理现代嵌套规则
        require('postcss-nested')({
            // 保留空样式
            preserveEmpty:true,
        }),
        // 兼容性处理
        require('postcss-preset-env')({ 
            stage: 2,
            minimumVendorImplementations: 3,
        }),
        // 自动前缀补全
        require('autoprefixer'),
        // 重置为初始属性
        require('postcss-initial')({
            reset: 'inherited'
        }),
        // 滚动条处理
        require('postcss-scrollbar'),
        // 排序处理
        require('css-declaration-sorter')({
                order: "smacss"
        }),
        // 最小化
        require('cssnano')({
            preset: 'default',
        }),
    ],
}

添加运行配置

package.json

1
2
3
4
5
6
7
8

{
  "scripts": {
    "make": "./node_modules/.bin/postcss ./src/index.css --config ./postcss.config.js -d dist -m"
  },
  "browserslist": [
    "default",
  ],
}

运行 postcss-cli

在src文件夹下创建index.css，并写入需要转换的样式

执行

1

npm run make

转换结果出现在dist文件夹中

js 初步工程化

babel.js 提供了从 ES2015+ (ES6)的JS语法转换到 ES5 的方法。

从 IE9 开始部分支持 ES5，IE10完全支持ES5。

babel工具可以处理大部分现代JS使他们兼容旧时代的浏览器