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