如何在Webpack项目中将对象数组及其属性导出到其他JS文件

1. 编写正确的导出逻辑 #

首先在你定义data数组的文件（假设文件名为data.js，和functions.js处于同级目录）末尾添加导出语句，支持两种常用导出模式：

• 模式1：默认导出

// data.js 文件末尾添加
export default data;

对应functions.js中的导入写法：

// 导入变量名可自定义，不需要和原变量名一致
import customData from './data.js';
// 直接使用即可，例：console.log(customData) 可输出完整数组

• 模式2：命名导出

// data.js 文件末尾添加
export { data };

对应functions.js中的导入写法：

// 变量名必须和导出时的名称完全一致，需要用大括号包裹
import { data } from './data.js';

2. 不生效时的配置排查 #

如果语法正确仍无法正常导入，按以下顺序排查：

• 确认导入路径拼写正确，同级文件必须加./前缀，若Webpack未配置自动识别后缀，需要补全.js后缀
• 确认项目package.json中已添加"type": "module"配置，避免Webpack默认按CommonJS模块解析导致ES模块语法失效
• 确认webpack.config.js中配置了.js文件的编译规则，基础配置参考：

module.exports = {
  // 其余项目配置保持不变
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
}

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