Vue+Webpack项目引入Leaflet源码报exports未定义错误求助

看起来你在手动引入Leaflet源码到Vue+Webpack项目时遇到了模块导出的问题，我来帮你梳理一下解决方案：

问题根源 #

Leaflet的源码入口文件Leaflet.js采用了CommonJS/UMD的写法，里面的window.L = exports;语句依赖CommonJS环境下的全局exports变量。但你用import语法引入时，Webpack会将其当作ES模块处理，在ES模块的严格模式中，全局的exports并没有被定义，因此抛出了Uncaught ReferenceError: exports is not defined错误。

推荐解决方案：使用npm包而非本地源码 #

既然你已经在项目依赖中安装了leaflet@1.3.1，完全没必要手动复制源码到src目录，直接使用npm包会更省心：

1. 在组件或入口文件中正确引入：

   // 引入Leaflet核心
   import L from 'leaflet';
   // 别忘了引入Leaflet的样式文件
   import 'leaflet/dist/leaflet.css';
   

2. 这样Webpack会自动处理Leaflet的模块导出，无需担心exports未定义的问题，同时样式也能正确加载。

如果一定要使用本地源码的话 #

如果你因为特殊需求必须引入本地的Leaflet源码，可以尝试以下调整：

• 改用require引入：CommonJS的require语法会更适配Leaflet源码的导出方式：

  const L = require('@/leaflet/src/Leaflet');
  

• 确保Webpack能正确识别模块：检查你的Webpack基础配置中是否正确配置了@别名指向src目录：

  // webpack.base.conf.js
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '../src')
    }
  }
  

• 调整Babel转译范围：如果源码中有未转译的ES6语法，需要在Webpack的module.rules中添加对src/leaflet目录的Babel处理规则：

  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [path.resolve(__dirname, '../src'), path.resolve(__dirname, '../src/leaflet')]
      }
    ]
  }
  

额外提示 #

你的Babel配置中preset-env的modules: false是正确的（让Webpack来处理模块打包），不需要修改这部分。另外，建议优先使用官方的npm包，后续的版本更新、依赖管理都会更方便。

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