如何利用Webpack或React实现自动导入，无需每次手动引入文件与组件？

以下是几种无需手动编写import语句就能直接使用<Row>组件的简单方法：

方法一：Webpack ProvidePlugin（无需额外依赖） #

Webpack自带的ProvidePlugin可以将指定模块注册为全局变量，在所有文件中直接使用：

1. 打开项目的Webpack配置文件（通常是webpack.config.js）
2. 引入Webpack并配置插件：

const webpack = require('webpack');

module.exports = {
  // ...其他已有配置
  plugins: [
    // 新增ProvidePlugin配置
    new webpack.ProvidePlugin({
      Row: ['./src/components/Row', 'default'] // 替换为你的Row组件实际路径
    })
  ]
};

ESLint兼容配置 #

为避免ESLint报"Row未定义"的错误，在.eslintrc（或.eslintrc.json）中添加全局变量声明：

{
  "globals": {
    "Row": true
  }
}

方法二：Babel自动导入插件 #

使用babel-plugin-auto-import可以在编译阶段自动为用到的组件插入import语句，无需全局变量：

1. 安装依赖：

npm install babel-plugin-auto-import --save-dev

2. 修改Babel配置文件（.babelrc或babel.config.js）：

module.exports = {
  plugins: [
    ['auto-import', {
      'imports': [
        {
          'name': 'Row',
          'path': './src/components/Row' // 替换为你的组件路径
        }
      ]
    }]
  ]
};

如果ESLint仍报错，同样在ESLint配置中添加Row为全局变量即可。

方法三：Create React App（CRA）项目适配（无需eject） #

如果你的项目基于CRA且不想暴露Webpack配置，可以用react-app-rewired修改配置：

1. 安装依赖：

npm install react-app-rewired customize-cra --save-dev

2. 在项目根目录创建config-overrides.js：

const { override, addWebpackPlugin } = require('customize-cra');
const webpack = require('webpack');

module.exports = override(
  addWebpackPlugin(
    new webpack.ProvidePlugin({
      Row: ['src/components/Row', 'default']
    })
  )
);

3. 修改package.json中的启动脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

4. 同样配置ESLint全局变量，避免报错。

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