Angular 6编译后Leaflet-geotiff插件出现require未定义错误求助

我来帮你搞定这个问题，之前在Angular项目里集成Leaflet相关插件时也踩过类似的坑，给你几个一步步的解决方案：

1. 移除组件里的require调用，改用全局变量 #

你代码里的var GeoTIFF = require("./geotiff.js");是Node.js环境的CommonJS写法，Angular浏览器环境默认不支持require语法，这正是报错的根源。

因为你已经在angular.json的scripts数组里加载了geotiff的脚本，GeoTIFF会作为全局变量暴露在浏览器环境中，所以直接删掉这句require代码，在组件里直接使用GeoTIFF即可。

2. 确保脚本加载顺序正确 #

脚本的加载顺序非常关键，必须先加载依赖库，再加载依赖它们的插件。把angular.json里的scripts数组调整成以下顺序：

"scripts": [
  "node_modules/leaflet/dist/leaflet.js",
  "node_modules/geotiff/dist/main.js",
  "node_modules/plotty/src/plotty.js",
  "node_modules/leaflet-geotiff/leaflet-geotiff.js",
  "node_modules/leaflet-geotiff/leaflet-geotiff-plotty.js"
]

这样能保证leaflet、geotiff、plotty这些基础库先加载完成，再加载依赖它们的leaflet-geotiff插件。

3. 添加TypeScript类型声明（可选但推荐） #

因为Angular用TypeScript，它可能会识别不到全局的GeoTIFF、L、plotty变量，导致编辑器报错。可以在项目根目录（或者src目录下）创建一个typings.d.ts文件，添加以下声明：

declare var GeoTIFF: any;
declare var L: any;
declare var plotty: any;

这样TypeScript就会承认这些全局变量的存在，不会再抛出类型错误。

4. 匹配官方文档的依赖版本 #

你当前安装的geotiff版本可能和官方文档推荐的0.4.1不一致，新版本的库可能改变了模块暴露方式，导致全局变量无法正常挂载。试试安装指定版本：

npm install geotiff@0.4.1 plotty@0.2.0 leaflet@1.3.1 --save

使用和官方文档完全一致的版本，能最大程度避免兼容性问题。

5. 验证插件功能 #

完成以上步骤后，重新编译运行项目：

ng serve

现在应该既不会出现require is not defined的错误，Leaflet-Geotiff的功能也能正常工作了。

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