webpack 程序里集成 Cesium

我们的webpack程序已经搭好了框架，下来我们干点有意思的，增加Cesium。

安装Cesium

从npm中安装 cesium 模块，在 package.json 中增加开发依赖选项。

npm install --save-dev cesium

webpack中配置Cesium

Cesium是一个庞大的复杂的库。除了JavaScript模块之外，它还包含静态资源css，图片和json文件。它也包含为了多线程进行大量计算的web worker。和传统npm模块不同，Cesium也没有定义一个入口，因为这个库可以各种方式应用。为了正确使用，我们需要配置一些额外选项。
首先，我们定义Cesium所在位置。我们使用源码，这样我们就可以使用独立模块，依靠webpack可以跟踪依赖性。其他方式是使用编译好的（最小化压缩或者未压缩）版本的Cesium；可是，那些模块已经被RequireJS optimizer 组合和优化，这种方式集成起来简单避免犯错，但是对于我们的优化灵活度不够好。

在webpack.config.js,我们增加如下配置

// Cesium源码所在目录
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';

我们选择使用了npm 中的模块，安装容易一些，当然你也可以用 GitHub 库 上的版本，或者解压已发布版本下载。这时候仅仅需要更改cesiumSource 指向Cesium的 Source 目录，相对 webpack.config.js 文件的相对路径。
接着再增加一些配置项，为了解决使用webpack编译Cesium的一些问题。

    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
        //需要编译Cesium中的多行字符串 
        sourcePrefix: ''
    },
    amd: {
        //允许Cesium兼容 webpack的require方式 
        toUrlUndefined: true
    },
    node: {
        // 解决fs模块的问题（Resolve node module use of fs）
        fs: 'empty'
    },

快速过下，为什么这些配置选项需要配置。

• output.sourcePrefix: '' 因为某些版本的webpack默认会在输出的每一行的开始增加一个\t 字符。Cesium有很多多行字符串，所以我们需要使用空字符串 ''来覆盖这个选项。
• amd.toUrlUndefined: true 告诉Cesium，webpack中计算 require声明的AMD 模块里的toUrl 函数和标准的不兼容。
• node.fs: 'empty' 解决一些第三方库使用的fs 模块，它一般是用在NodeJS的环境里，而不能在浏览器环境里使用。
  下来我们增加一个 cesium 别名（alias） ，我们就很容易的在项目里引用，就像一个传统的Node 模块。

    resolve: {
        alias: {
            // Cesium模块名称
            cesium: path.resolve(__dirname, cesiumSource)
        }
    },

</figure>

管理Cesium 静态文件

最后，我们确认一下Cesium的静态资源，控件，web worker文件能被服务正确加载。
我们使用 copy-webpack-plugin，它能在编译阶段，把Cesium里静态文件整个拷贝到 dist 目录下，确保我们的服务能访问它。首先，安装它。

npm install --save-dev copy-webpack-plugin

下来在webpack.config.js文件最开始require它。

const CopywebpackPlugin = require('copy-webpack-plugin');

此外，在plugins 目录下增加下述配置：

    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        // 拷贝Cesium 资源、控价、web worker到静态目录 
        new CopywebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
        new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
        new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ])
    ],

我们直接拷贝了Assets和Widgets目录。也拷贝了编译好的 web worker脚本，他们已经使用 RequireJS optimizer编译和优化过了。因为web woker设计就是运行在他们自己的线程里，所以他们可以直接载入和运行。web worker很少需要调试他们原来的代码。所以直接整个从 Build/Cesium/Workers目录拷贝过去。
如果你用的GitHub库的源码，那么这个Build目录不存在。确认你定位到了Cesium的根目录下，然后运行 npm run release去编译输出。更多信息可以查看Cesium编译指导。
最后，我们使用DefinePlugin 定义了一个环境变量，这个告诉Cesium加载静态文件的URL根路径，并把它编译到webpack里去。最后plugins 的配置数组应该是这样的：

    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }), 
        new CopywebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
        new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
        new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]),
        new webpack.DefinePlugin({
            //Cesium载入静态的资源的相对路径
            CESIUM_BASE_URL: JSON.stringify('')
        })
    ],

在我们的程序里引用Cesium

现在我们的程序里引用Cesium的独立模块有几种方式。使用CommonJS的语法，以及最新的ES6的 import模块声明。
另外，你也可以通过一个 Cesium 引入整个Cesium库（例如，我们在 Sandcastle中所用的方式）。你也可以只请求某个你需要的特定模块。因为Cesium是一个巨大的库，这种方式让你只引用你用的特定模块，而不是整个Cesium库。

CommonJS 形式的 require

引用Cesium整个库:

var Cesium = require('cesium/Cesium');
var viewer = new Cesium.Viewer('cesiumContainer');

引用某个Cesium库:

var Color = require('cesium/Core/Color');
var color = Color.fromRandom();

ES6 形式的 import

引用Cesium整个库:

import Cesium from 'cesium/Cesium';
var viewer = new Cesium.Viewer('cesiumContainer');

引用某个Cesium库:

import Color from 'cesium/core/Color';
var color = Color.fromRandom();

请求静态资源文件

webpack的设计理念就是每个文件都当作一个模块。所以导入静态资源和导入js模块完全相同。我们已经在loaders里面配置了，告诉webpack每种类型的文件使用哪个loader，所以我们只需要调用 require：

require('cesium/Widgets/widgets.css');

Hello World! 示例

有了基本框架也学习如何引入Cesium文件，我们来创建一个简单的Hello World程序。
再看下index.js文件。删除它的内容，首先我们引入 Cesium，然后定义 Cesium的对象：

var Cesium = require('cesium/Cesium');

为了使用Cesium Viewer里的控件，我们还需要引入Cesium的CSS：

require('cesium/Widgets/widgets.css');

在HTML的body部分，我们创建了一个viewer需要的div。在 index.html 文件里，删除 <p>Hello World!</p> 这一行，替换成下面：

<div id="cesiumContainer"></div>

最后，我们创建一个viewer的实例。返回到 index.js 文件，添加下面代码：

var viewer = new Cesium.Viewer('cesiumContainer');

当我们运行 npm start ，我们将看见浏览器里的Cesium控件了。