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

【问题标题】：Imported generated JSON in JSX causes Webpack build loop在 JSX 中导入生成的 JSON 导致 Webpack 构建循环
【发布时间】：2018-06-26 19:53:06
【问题描述】：

我制作了一个小型 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 文件导入到一个 React 组件 JSX 文件中，然后将 JSON 数据解析为项目在 AA 和 AAA 要求下使用的颜色的可视化指南......任何人

我遇到的问题是我的 webpack-dev-server 不断地重新构建，因为它认为 JSX 文件已被更改，而实际上它只是对 JSON 文件的更改进口的。

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

我已经尝试将 JSON 文件保存在 webpack 开发人员的监视位置之外，并且仍然存在构建循环。

提前致谢！

【问题讨论】：

标签： json reactjs webpack build postcss

【解决方案1】：

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

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

试一试，希望能帮到你。

【讨论】：