openlayers3 自定义打包


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"
  ],

转载自:https://blog.csdn.net/qq451354/article/details/54314269

You may also like...