openlayers3 自定义打包

时间：2022-09-18 03:01:18

1.简介

首先放一个启发我的文章：http://www.jianshu.com/p/d06d58804414

ol有很多库，有时候我们只需要部分，比如map,view.layer等。如果把整个文件都引入项目，有些浪费资源且文件过大，与最小化的思路相违。这时候就需要单独打包这些内容，这也是这边记录的主要内容，如何自定义打包我们需要的库？

2.创建配置文件

1.下载openlayer: npm i openlayers
2.创建ol-custom.json放在node_modules/openlayers/build中。
注意

build文件夹是在npm中安装openlayers的时候自带的，里面那些配置文件是必须的。所以没有build的旁友们要注意一下你的代码来源。

3.配置

{
  "exports": [ "ol.Map", "ol.View", "ol.control.defaults", "ol.layer.Tile", "ol.source.OSM" ],
  "compile": { "externs": [ "externs/oli.js", "externs/olx.js" ], "define": [ "goog.DEBUG=false" ], "extra_annotation_name": [ "api", "observable" ], "compilation_level": "ADVANCED", "manage_closure_dependencies": true } }

4.npm执行:
cd ./node_modules/openlayers
node tasks/build.js build/ol-custom.json build/ol-custom.js

此时在build文件夹下会出现ol-custom.js的文件。这个文件就是我们自定义的打包文件。

关于配置
可以看下ol的官方文档：
https://github.com/Chengyanzhao/openlayers/blob/master/tasks/readme.md

更多
使用上述配置打包的结果是经过混淆和压缩的，也就是说你new map 后，无法找到map.addlayer方法。这就需要不混淆打包，更改配置即可实现：

{
  "exports": ["*"],
  "compile": { "externs": [ "externs/oli.js", "externs/olx.js" ] } }

之试了很久都没找到如何不混淆打包，但是看了官方的文档，说如果不配置其他项就可以实现不混淆打包。看来英语还是很有必要的，不然根本没法解决这个问题。

另外”exports”: [““], 这里代表全部打包，如果想固定打某些库，可以像下面那样配置：

"exports": [
    "ol.Map",
    "ol.View",
    "ol.control.defaults",
    "ol.layer.Tile",
    "ol.source.OSM"
  ],
标签：

相关文章