Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/

webpack是打包JavaScript模块流行且强大的工具。它允许开发人员以直观的方式构造代码和assets,并使用简单的require语句根据需要加载不同类型的文件。构建时,它将跟踪代码依赖关系,并将这些模块打包到浏览器加载的一个或多个包中。

在本教程的前半部分,我们从头开始建立了简单的Web应用程序使用webpack,然后覆盖后续步骤集成Cesium npm module。如果你喜欢使用cesiumjs开发Web应用,那么webpack是一个好的选择。如果您是刚接触Cesium并且想要寻找学习构建您的第一个样例应用,请查看Getting Started Turtorial

在第二部分,我们将探索更高级的Webpack配置,以优化使用CesiumJS的应用程序。

在官方的cesium-webpack-example中可以找到优化CesiumJS webpack应用程序的完整代码和提示。

Prerequisites 先决条件

  • 基本了解命令行、JavaScript和Web开发。
  • 一个IDE或代码编辑器。Cesium团队的开发人员使用Visual Studio Code,但是一个最小的代码编辑器(如Sublime文本)也完全没有问题。
  • 已安装Node.js。我们建议使用最新的LTS版本。

Create a basic webpack app 创建基础webpack应用

在本节中,我们将介绍如何使用webpack和开发服务器设置基本的Web应用程序。如果您已经设置了一个应用程序,并且只想添加cesiumjs,请跳过Add CesiumJS to a webpack app

Initialize an app with npm 使用npm初始化应用

为您的应用创建一个新的cesium-webpack。打开控制台,导航到新目录,然后运行以下命令:

npm init

按照提示操作并填充有关应用程序的所有详细信息。按enter键使用默认值。这将创建package.json

Create the app code 创建应用代码

为我们的应用程序代码创建一个src目录。当我们构建应用程序时,webpack将在dist目录中生成分发文件

创建src/index.html然后为样板HTML页添加代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

接下来,为应用程序创建一个入口点。这是webpack查找包的所有javascript源代码和依赖项的entry point起点。

创建src/index.js然后添加下列代码:

console.log('Hello World!');

Install and configure webpack 安装和配置webpack

开始安装webpack:

npm install --save-dev webpack

Configuration 配置

创建webpack.config.js以定义webpack配置对象。

const path = require('path');

const webpack = require('webpack');

module.exports = {
context: __dirname,
entry: {
app: './src/index.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
}
};

context指定文件的基本路径。entry用于指定包。在这种情况下,app包的入口点是src/index.js。webpack将把打包后的app.js输出到dist文件夹。

Loaders 加载

Webpack像模块一样加载所有内容。使用loaders加载CSS和其他资产文件。安装style-loadercss-loaderurl-loader

npm install --save-dev style-loader css-loader url-loader

webpack.config.js中添加两个module.rules:一个用于css文件,另一个用于其他静态文件。对于每个,test定义要加载的文件类型,use指定加载程序的列表。

const path = require('path');

const webpack = require('webpack');

module.exports = {
context: __dirname,
entry: {
app: './src/index.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}, {
test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
use: [ 'url-loader' ]
}]
}
};

Plugins 插件

定义index.html并使用一个名为html-webpack-plugin的webpack plugin将包注入该页面。

npm install --save-dev html-webpack-plugin

webpack.config.js中引用该插件,然后将它注入到plugins。将src/index.html传入作为我们的template

const path = require('path');

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {
context: __dirname,
entry: {
app: './src/index.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}, {
test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
use: [ 'url-loader' ]
}]
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
};

配置文件是一个javascript文件,因此我们可以引入其他节点模块并执行操作。

Bundle the app 捆绑应用

使用package.json定义可以使用npm调用的脚本。添加build命令。

  "scripts": {
"build": "node_modules/.bin/webpack --config webpack.config.js"
}

此脚本调用Webpack并传递进webpack.config.js配置文件。

我们在这些脚本中使用webpack和webpack-dev-server的本地安装。这允许每个项目使用自己的单独版本,这是webpack文档推荐的版本。如果您希望使用全局版本,请使用npm install--global webpack全局安装它,并使用命令webpack--config webpack.config.js运行它。

当运行build命令时:

npm run build

您应该看到webpack的一些输出,从以下内容开始:

npm run build

> test-app@1.0.0 build C:\workspace\test-app
> node_modules/.bin/webpack --config webpack.config.js Hash: 2b42bff7a022b5d956a9
Version: webpack 3.6.0
Time: 2002ms
Asset Size Chunks Chunk Names
Assets/Textures/NaturalEarthII/2/0/3.jpg 10.3 kB [emitted]
app.js 162 kB 0 [emitted] app

app.js包和index.html文件将被输出到dist文件夹中。

Run the development server 运行开发服务器

使用webpack-dev-server服务于开发构建然后可以在行动中看到我们的应用:

npm install --save-dev webpack-dev-server

在package.json中添加一个start脚本以运行开发服务器。通过--config标志设置配置文件。执行命令时,使用--open标志在浏览器中打开应用程序。

  "scripts": {
"build": "node_modules/.bin/webpack --config webpack.config.js",
"start": "node_modules/.bin/webpack-dev-server --config webpack.config.js --open"
}

告诉开发服务器为dist文件夹提供文件。将其添加到webpack.config.js的底部。

    // development server options
devServer: {
contentBase: path.join(__dirname, "dist")
}

最终,我们运行app

npm start

你应该看到你的内容在localhost:8080上呈现,看到“Hello World!“打开浏览器控制台时,显示消息。

Add CesiumJS to a webpack app 将CesiumJS加入到webpack应用

Install CesiumJS 安装CesiumJS

从npmg上安装cesium模块,并将其加入到package.json。

Configure CesiumJS in webpack 在webpack中配置CesiumJS

CesiumJS是一个庞大而复杂的库。除了javascript模块之外,它还包括静态资产,如css、image和json文件。它包括Web worker文件,以便在单独的线程中执行密集计算。与传统的npm模块不同,CesiumJS没有定义入口点,因为库的使用方式多种多样。我们需要配置一些附加选项,以便与webpack一起使用。

首先,定义CesiumJS的位置。本教程基于源代码,因此webpack可以包含单个模型并跟踪依赖项。或者,也可以使用CesiumJS的内置(简化或未简化)版本。然而,这些模块已经被组合和优化,这给了我们更少的灵活性。

将下列代码加入到webpack.config.js的顶部:

// The path to the CesiumJS source code
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';

本教程使用npm模块以便于安装,但您也可以克隆Github仓库或下载解压使用release版本

将以下选项添加到配置对象,以解决webpack如何编译CesiumJS的一些问题。

    output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'), // Needed to compile multiline strings in Cesium
sourcePrefix: ''
},
amd: {
// Enable webpack-friendly use of require in Cesium
toUrlUndefined: true
},
node: {
// Resolve node module use of fs
fs: 'empty'
},
  • output.sourcePrefix: 在每行之前添加\t制表符,以便覆盖webpack默认值。CesiumJS有一些多行字符串,因此我们需要用空前缀''*覆盖此默认值。
  • amd.toUrlUndefined: true 告诉CesiumJS AMD webpack使用不符合标准toUrl函数的评估require语句的版本。
  • node.fs: 'empty' 解决fs模块的某些第三方使用问题,该模块的目标是在节点环境中使用,而不是在浏览器中使用。

添加cesium alias,以便我们可以在应用程序代码中引用它。

    resolve: {
alias: {
// CesiumJS module name
cesium: path.resolve(__dirname, cesiumSource)
}
},

Manage CesiumJS static files 管理CesiumJS中的静态文件

最后,确保静态CesiumJS资产、小部件和web worker文件得到正确的服务和加载。

作为构建过程的一部分,使用copy-webpack-plugin将静态文件复制到dist目录。

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

在* webpack.config.js*文件中的上部引入:

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

并将其加入到plugins数组中:

    plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
// Copy Cesium Assets, Widgets, and Workers to a static directory
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' } ])
],

这将复制AssetsWidgets目录以及built的web worker脚本。

如果您使用的是CesiumJS仓库的fork,那么Build文件夹将不存在。运行npm run release生成输出文件夹。有关详细信息,请参阅《Cesium生成指南》

定义一个环境变量,该变量告诉CesiumJS使用webpackDefinePlugin加载静态文件的基本URL。plugins数组现在将如下所示:

    plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
// Copy Cesium Assets, Widgets, and Workers to a static directory
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({
// Define relative base path in cesium for loading assets
CESIUM_BASE_URL: JSON.stringify('')
})
],

Require CesiumJS modules in our app 在应用中引用CesiumJS模块

在我们的应用程序中,有几种方法可以引用CesiumJS模块。您可以使用CommonJS语法或ES6import语句。

您可以导入整个CesiumJS库,或者只需要引入您需要的特定模块。引入模块将导致webpack只编译包中的那些模块及其依赖项,而不是整个库。

CommonJS style require

引入所有的CesiumJS:

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

引入独立模块

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

ES6风格导入

引入所有的CesiumJS:

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

引入独立模块

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

Requiring asset files 引用asset文件

webpack背后的原理是,每个文件都被视为一个模块。这使得导入资产与包括javascript相同。我们告诉Webpack如何使用加载器加载配置中的每种类型的文件,所以我们只需要调用require

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

Hello World!

创建一个新的文件,src/css/main.css,为了样式化我们的应用:

html, body, #cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

创建一个div用于index.html body中的CesiumJS Viewer。替换

Hello World!

使用下面的div:

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

删除index.js中的内容并包含Cesium和我们的CSS文件:

var Cesium = require('cesium/Cesium');
require('./css/main.css');
require('cesium/Widgets/widgets.css');

为创建Viewer添加一行代码:

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

使用npm start运行应用用于在浏览器中查看Viewer。

复制并粘贴你最喜欢的Sandcastle例子。例如,粒子系统实例可以得出一个很好的结论。

Advanced webpack configurations 高级webpack配置

webpack可以通过更多方式提高性能、减小包大小以及执行其他或复杂的构建步骤。在这里,我们将讨论一些与使用CesiumJS库相关的配置选项。

webpack.release.config.js的仓库示例中可以找到优化生产Cesium webpack构建的配置。

Code splitting 代码分割

默认情况下,webpack将CesiumJS打包在与我们的应用程序相同的块中,从而生成一个大文件。我们可以将CesiumJS拆分成自己的包,并使用CommonChunksPlugin提高我们的应用程序性能。如果你最终为你的应用程序创建了多个块,它们都可以引用一个常见的cesium块。

将插件添加到webpack.config.js文件中,并指定分解CesiumJS模块的规则:

    plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'cesium',
minChunks: module => module.context && module.context.indexOf('cesium') !== -1
})
]

Enable source maps 启用源映射

源映射允许Webpack将错误跟踪回原始内容。它们提供或多或少详细的调试信息,以换取编译速度。我们建议使用'eval'选项。

    devtool: 'eval'

在生产产品中,不推荐使用源映射。

Remove pragmas 移除编译指令

CesiumJS源代码中存在开发人员错误和警告,这些错误和警告已从我们的小型发布版本中删除。由于没有内置的Webpack方法来删除这些警告,因此我们将使用strip-pragma-loader

安装包:

npm install strip-pragma-loader --save-dev

module.rules中将debug设为false,引入加载器:

    rules: [{
// Strip cesium pragmas
test: /\.js$/,
enforce: 'pre',
include: path.resolve(__dirname, cesiumSource),
use: [{
loader: 'strip-pragma-loader',
options: {
pragmas: {
debug: false
}
}
}]
}]

Uglify and minify 混淆与压缩

增删和缩小代码允许在生产中使用较小的文件大小。对于一个发布版本,CesumJS会修改JavaScript文件并缩小CSS文件。

使用uglifyjs-webpack-plugin用于混淆CesiumJS源代码。

npm install uglifyjs-webpack-plugin --save-dev

在配置文件中引入他:

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

在插件列表中包含他:

    plugins: [
new webpack.optimize.UglifyJsPlugin()
]

css-loader上使用minimize选项用于优化CSS。

    module: {
rules: [{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
// minify loaded css
minimize: true
}
}
]
}]
}

Resources 资源

官方的cesium-webpack-example仓库包含最小webpack配置、本教程中介绍的Hello World代码以及可选代码配置的说明。

有关要包含在新应用程序中的CesiumJS功能的教程,请参阅Cesium Workshop教程

在[Sandcastle]中探索实例,并查看CesiumJS文档

要了解有关webpack的更多信息,请查看webpack概念,或深入阅读文档

Cesium中文网交流QQ群:807482793

Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/

Cesium中级教程10 - CesiumJS and webpack的更多相关文章

  1. Cesium中级教程8 - Introduction to Particle Systems 粒子系统入门

    Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ What is a particle system? 什么是粒子 ...

  2. Cesium中级教程7 - Geometry and Appearances 几何图形和外观

    Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 本教程将向您介绍提供使用Primitive API的几何图形和外 ...

  3. Cesium中级教程3 - Camera - 相机(摄像机)

    Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ Camera CesiumJS中的Camera控制场景的视图.有 ...

  4. Cesium中级教程5 - Terrain 地形

    Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ CesiumJS支持对与水流相关的海洋.湖泊和河流以及全球高分辨 ...

  5. Cesium中级教程4 - 空间数据可视化(二)

    Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ Viewer中的Entity功能 让我们看看Viewer为操作e ...

  6. Cesium中级教程2 - 图层

    Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ Cesium支持从几个标准服务绘制和添加高分辨率图像(地图)图层 ...

  7. Cesium中级教程1 - 空间数据可视化(一)

    Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 本教程将教读者如何使用Cesium的实体(Entity)API绘 ...

  8. Cesium中级教程6 - 3D Models 三维模型

    3D Models 三维模型 本教程将教您如何通过Primitive API转换.加载和使用Cesium中的三维模型.如果你是Cesium的新用户,可能需要阅读三维模型部分的(空间数据可视化教程)[h ...

  9. Cesium中级教程9 - Advanced Particle System Effects 高级粒子系统效应

    Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 要了解粒子系统的基础知识,请参见粒子系统入门教程. Weathe ...

随机推荐

  1. 实体转为json的,如何处理外键情况

    实体转为json的,如何处理外键情况 jc.registerJsonValueProcessor(Userrelation.class, new JsonValueProcessor() {// 此处 ...

  2. InnoDB学习(五)之数据库锁

    InnoDB存储引擎的默认隔离级别事可重复读,MVCC多版本并发控制仅仅解决了快照读情况下的数据隔离,而对于当前读,InnoDB通过锁来进行并发控制. InnoDB锁 本文主要参考了MySQL官方文档 ...

  3. JENKINS中创建全局变量并在JOB中使用

    配置了一个 "PASSWORD"的变量值 然后再脚本里面使用   注意这里必须要用双引号 不然不行

  4. 【LeetCode】971. Flip Binary Tree To Match Preorder Traversal 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 前序遍历 日期 题目地址:https://leetc ...

  5. 【LeetCode】400. Nth Digit 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...

  6. 【LeetCode】609. Find Duplicate File in System 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...

  7. css--深入理解z-index引发的层叠上下文、层叠等级和层叠顺序

    前言 在编写css样式代码的时候,我们经常会遇到z-index属性的使用,我们可能只了解z-index能够提高元素的层级,并不知道具体是怎么实现的.本文就来总结一个由z-index 引发的层叠上下文和 ...

  8. HTML网页设计基础笔记 • 【目录】

    持续更新中- 我的大学笔记>>> 章节 内容 第1章 HTML网页设计基础笔记 • [第1章 HTML5基础] 第2章 HTML网页设计基础笔记 • [第2章 排列页面内容] 第3章 ...

  9. UML 基本模型元素

    目录 1. 结构模型元素 (1)类(class) (2)接口(interface) (3)协作(collaboration) (4)用例(use case) (5)活动类(active class) ...

  10. 使用sudo执行命令提示command not found

    笔记: 使用源码部署nginx的时候,使用sudo nginx提示command not found,但是直接使用nginx会导致权限问题: 这种情况应该是环境变量导致的,使用 env |grep P ...