在 JSX 中导入生成的 JSON 导致 Webpack 构建循环

Question

我有一个我制作的小 postcss 插件，它在 webpack 构建期间从 colors.css 变量文件生成一个 JSON 文件。

我的postcss插件

const fs = require('fs');
const postcss = require('postcss');

const capitalize = (string) => string.charAt(0).toUpperCase() + string.slice(1);

const getPropName = (string) => {
  let name = clean(string.split('-'));
  name.shift();
  for(let k = 1; k < name.length; k++){ //start at 1 to skip 'color' prefix
    name[k] = capitalize(name[k].toString());
  }
  return name.join('');
};

const clean = (array) => {
  let i = array.length;
  while(i--){
    if (!array[i]) {         
      array.splice(i, 1);
      i++;
    }
  }
  return array;
};

module.exports = postcss.plugin('cssobject', (files, filters, options) =>
  (css) => {
    options = options || {
      destination: ''
    };
    // Processing code will be added here

    const getVariable = (variable) => {
      let result;
      css.walkRules((rules) => {
        rules.walkDecls((decl) => {
          const pointer = variable.replace('var(', '').replace(')','');
          if(!decl.prop.match(pointer)) return;
          result = decl.value;
        });
      });
      return result;
    };

    css.walkRules((rules) => { //hooks into CSS stream
      let i = files.length;
      let cssObject = {};
      while (i--) {
        if(!rules.source.input.from.match(files[i])) return; //scrubs against requested files

        rules.walkDecls((decl) => {
          let j = filters.length;
          while(j--){
            if(!decl.prop.match(filters[j])) return; //scrubs against requested rules
            let prop = getPropName(decl.prop);
            cssObject[prop] = (decl.value.match('var'))? getVariable(decl.value) : decl.value;
          }
        });
      }
      if (options.destination) {
        fs.writeFile(options.destination, JSON.stringify(cssObject), 'utf8');
      }
    });
  }
);

然后我将此 JSON 文件导入反应组件 JSX 文件，然后将 JSON 数据解析为项目使用的颜色在 AA 和 AAA 要求下的视觉指南...任何人

我遇到的问题是我的 webpack-dev-server 一遍又一遍地重新构建，因为它认为已经对 JSX 文件进行了更改，而实际上它只是对 JSON 正在导入文件。

是否有一种标准方法可以将生成的文件导入 JSX 而不会导致无限构建循环？

我已经尝试将 JSON 文件保存在 webpack dev 的监视位置之外，但仍然存在构建循环。

提前致谢！

Answer 1

您可以更改文件的时间戳，更改文件后 webpack 将不会构建

const now = Date.now() / 1000;
const lastModifyTime = now - 11;
const lastAccessTime = now - 11;
fs.utimesSync(jsonPath, lastModifyTime, lastAccessTime);

试一试，希望对你有帮助。

在 JSX 中导入生成的 JSON 导致 Webpack 构建循环

Imported generated JSON in JSX causes Webpack build loop

json

build

reactjs

webpack

postcss