element源码学习三（build:file）

"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js"

node build/bin/iconInit.js

// build/bin/iconInit.js
'use strict';

var postcss = require('postcss');
var fs = require('fs');
var path = require('path');
var fontFile = fs.readFileSync(path.resolve(__dirname, '../../packages/theme-chalk/src/icon.scss'), 'utf8'); // 异步读取文件
var nodes = postcss.parse(fontFile).nodes;
var classList = [];

nodes.forEach((node) => {
  var selector = node.selector || ''; // 选择器
  var reg = new RegExp(/\.el-icon-([^:]+):before/);
  var arr = selector.match(reg);

  if (arr && arr[1]) {
    classList.push(arr[1]);
  }
});

classList.reverse(); // => ["platform-eleme","eleme","delete-solid","delete","s-tools","setting", ...]

fs.writeFile(path.resolve(__dirname, '../../examples/icon.json'), JSON.stringify(classList), () => {});

以上方法通过解析 icon.scss 最终导出 icon.json 文件，该文件保存了各种图标。

一、看看postcss.parse()方法是啥

1. 先搭建环境

$ npm init -y && npm i -D webpack webpack-cli postcss && touch index.scss index.js

2. index.scss 文件内容：

div {
    background: red;
    .a {
        color: green;
    }
}
.wrap .b {
    font-size: 19px;
}

3. index.js 文件内容：

let postcss = require('postcss');
let fs = require('fs');
let path = require('path');

let fileCont = fs.readFileSync(path.resolve(__dirname, './index.scss'), 'utf-8');
let parseCss = postcss.parse(fileCont);
let nodes = parseCss.nodes;

console.log('-----------------------------------------------------');
console.log('文件内容：');
console.log(fileCont);
console.log('-----------------------------------------------------');
console.log('postcss 解析 css：');
console.log(parseCss);
console.log('-----------------------------------------------------');
console.log('postcss 解析 css 返回对象的 nodes 属性：');
console.log(nodes);
console.log('-----------------------------------------------------');

4. 执行node index.js
   输出：

-----------------------------------------------------
文件内容：
div {
    background: red;
    .a {
        color: green;
    }
}
.wrap .b {
    font-size: 19px;
}
-----------------------------------------------------
postcss 解析 css：
Root {
  raws: { semicolon: false, after: '' },
  type: 'root',
  nodes:
   [ Rule {
       raws: [Object],
       type: 'rule',
       nodes: [Array],
       parent: [Circular],
       source: [Object],
       selector: 'div' },
     Rule {
       raws: [Object],
       type: 'rule',
       nodes: [Array],
       parent: [Circular],
       source: [Object],
       selector: '.wrap .b' } ],
  source:
   { input:
      Input {
        css: 'div {\n    background: red;\n    .a {\n        color: green;\n    }\n}\n.wrap .b {\n    font-size: 19px;\n}',
        hasBOM: false,
        id: '' },
     start: { line: 1, column: 1 } } }
-----------------------------------------------------
postcss 解析 css 返回对象的 nodes 属性：
[ Rule {
    raws: { before: '', between: ' ', semicolon: false, after: '\n' },
    type: 'rule',
    nodes: [ [Object], [Object] ],
    parent:
     Root {
       raws: [Object],
       type: 'root',
       nodes: [Circular],
       source: [Object] },
    source: { start: [Object], input: [Object], end: [Object] },
    selector: 'div' },
  Rule {
    raws: { before: '\n', between: ' ', semicolon: true, after: '\n' },
    type: 'rule',
    nodes: [ [Object] ],
    parent:
     Root {
       raws: [Object],
       type: 'root',
       nodes: [Circular],
       source: [Object] },
    source: { start: [Object], input: [Object], end: [Object] },
    selector: '.wrap .b' } ]
-----------------------------------------------------

---

目录

• element源码学习一(package.json)
• element源码学习二(dev)
• element源码学习三(build:file)
• element源码学习四(build:file)
• element源码学习五(build:file)