Cesium中級教程10 - CesiumJS and webpack

時間  2019-11-06
標籤 cesium 中級 教程 cesiumjs webpack 简体版
原文   原文鏈接

Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/ webpack是打包JavaScript模塊流行且強大的工具。它容許開發人員以直觀的方式構造代碼和assets，並使用簡單的require語句根據須要加載不一樣類型的文件。構建時，它將跟蹤代碼依賴關係，並將這些模塊打包到瀏覽器加載的一個或多個包中。javascript

在本教程的前半部分，咱們從頭開始創建了簡單的Web應用程序使用webpack，而後覆蓋後續步驟集成Cesium npm module。若是你喜歡使用cesiumjs開發Web應用,那麼webpack是一個好的選擇。若是您是剛接觸Cesium而且想要尋找學習構建您的第一個樣例應用，請查看Getting Started Turtorial。css

在第二部分，咱們將探索更高級的Webpack配置，以優化使用CesiumJS的應用程序。html

在官方的cesium-webpack-example中能夠找到優化CesiumJS webpack應用程序的完整代碼和提示。java

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。node

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

爲您的應用建立一個新的cesium-webpack。打開控制檯，導航到新目錄，而後運行如下命令：webpack

npm init

按照提示操做並填充有關應用程序的全部詳細信息。按enter鍵使用默認值。這將建立package.json。git

Create the app code 建立應用代碼

爲咱們的應用程序代碼建立一個src目錄。當咱們構建應用程序時，webpack將在dist目錄中生成分發文件。github

建立src/index.html而後爲樣板HTML頁添加代碼。web

<!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起點。npm

建立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-loader、css-loader和url-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' } ])
    ],

這將複製Assets和Widgets目錄以及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。替換*<p>Hello World!</p>*使用下面的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/

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程