如何仅在development环境下导入locize/translation-check？

问题背景 #

我使用locize/translation-check在开发环境搭建翻译管理UI，运行ESLint时触发如下报错：

5:1 error 'translation-check' should be listed in the project's dependencies, not devDependencies import/no-extraneous-dependencies

该报错逻辑合理，因为当前组件中直接静态导入了该包，但它仅存在于package.json的devDependencies中。当前简化后的组件代码如下：

...
import { showTranslations } from 'translation-check';
...

class Header extends React.Component {
  constructor(props) {
    ...
    this.showTranslations = this.showTranslations.bind(this);
    ...
  }

  ...
  
  showTranslations() {
    showTranslations(i18n);
  }

  render() {
    ...
    return (
      <header>
        <Navbar color="light" light expand="md" fixed="top">
          ...
        </Navbar>
        <div>
          <button id="i18n" className="btn btn-sm" onClick={this.showTranslations}>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">...</svg>
          </button>
        </div>
      </header>
    );
  }
}

Header.propTypes = { isLoading: PropTypes.bool.isRequired };

export default Header;

按钮对应的SCSS样式：

#i18n {
  bottom: 50px;
  position: fixed;
  left: 0;
  z-index: 99999;
}

需求明确：仅在development环境下导入locize/translation-check，同时不能注释ESLint报错、不能将依赖移至dependencies节点。

可行解决方案 #

方案1：动态导入+环境变量控制 #

将静态导入改为动态导入，结合环境变量控制导入逻辑和按钮渲染，彻底避免生产环境打包该依赖：

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showTranslationBtn: process.env.NODE_ENV === 'development'
    };
    this.showTranslations = this.showTranslations.bind(this);
  }

  async showTranslations() {
    // 仅开发环境才加载依赖
    if (process.env.NODE_ENV === 'development') {
      const { showTranslations } = await import('translation-check');
      showTranslations(i18n);
    }
  }

  render() {
    const { showTranslationBtn } = this.state;
    ...
    return (
      <header>
        <Navbar color="light" light expand="md" fixed="top">
          ...
        </Navbar>
        {/* 仅开发环境渲染按钮 */}
        {showTranslationBtn && (
          <div>
            <button id="i18n" className="btn btn-sm" onClick={this.showTranslations}>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">...</svg>
            </button>
          </div>
        )}
      </header>
    );
  }
}

方案2：配置ESLint允许开发环境导入devDependencies #

修改项目ESLint配置文件（如.eslintrc.js），给import/no-extraneous-dependencies规则添加例外，允许开发环境下导入devDependencies中的包：

module.exports = {
  // 其他配置项...
  rules: {
    'import/no-extraneous-dependencies': [
      'error',
      {
        devDependencies: process.env.NODE_ENV === 'development'
      }
    ]
  }
};

如果需要更精准的控制，可仅允许translation-check：

module.exports = {
  // 其他配置项...
  rules: {
    'import/no-extraneous-dependencies': [
      'error',
      {
        devDependencies: ['**/*translation-check*']
      }
    ]
  }
};

方案3：拆分开发专属组件 #

将翻译按钮拆分为单独的开发环境组件，主组件根据环境条件动态导入：

1. 创建开发专属组件HeaderTranslationBtn.dev.js：

import { showTranslations } from 'translation-check';
import React from 'react';

export default function HeaderTranslationBtn() {
  const handleClick = () => showTranslations(i18n);
  
  return (
    <div>
      <button id="i18n" className="btn btn-sm" onClick={handleClick}>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">...</svg>
      </button>
    </div>
  );
}

2. 在主Header.js中动态导入该组件：

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      TranslationBtn: null
    };
  }

  componentDidMount() {
    if (process.env.NODE_ENV === 'development') {
      import('./HeaderTranslationBtn.dev').then(module => {
        this.setState({ TranslationBtn: module.default });
      });
    }
  }

  render() {
    const { TranslationBtn } = this.state;
    ...
    return (
      <header>
        <Navbar color="light" light expand="md" fixed="top">
          ...
        </Navbar>
        {TranslationBtn && <TranslationBtn />}
      </header>
    );
  }
}

同时在ESLint配置中允许该开发组件的导入：

module.exports = {
  rules: {
    'import/no-extraneous-dependencies': [
      'error',
      {
        devDependencies: ['**/*.dev.js']
      }
    ]
  }
};

内容的提问来源于stack exchange，提问作者Aerendir