Cesium学习笔记（七）CesiumJS和Webpack

最新推荐文章于 2024-08-08 07:06:55 发布

Lafitteee拉菲

最新推荐文章于 2024-08-08 07:06:55 发布

阅读量413

点赞数 1

分类专栏： Cesium

本文链接：https://blog.csdn.net/weixin_43889028/article/details/112276728

版权

Cesium 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

CesiumJS和Webpack

优化一个CesiumJS webpack应用程序的完整代码和提示可以在官方实例库网站中找到：https://github.com/CesiumGS/cesium-webpack-example

创建一个基础webpack应用程序

使用npm初始化应用程序

为你的app创建一个新的cesium-webpack-app目录。打开控制台，进入这个新的目录，执行npm init，然后一路enter使用默认设置，最后会在目录里创建一个package.json文件。

创建app代码

创建src路径。当我们构建app时，webpack将在dist目录中生成分布文件。
创建src/index.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>

接下来，为app创建一个entry point，这是webpack为我们的bundle查找所有JavaScript源代码和依赖的起点。
创建src/index.js并添加下面的代码：console.log('Hello World!')

安装、配置webpack

开始安装webpack：

npm install --save-dev webpack

这里--save-dev的作用是自动将安装的模块和版本号添加到package.json文件的devDependencies下，省略了手动添加的麻烦。参考：https://segmentfault.com/q/1010000000403629

配置
创建webpack.config.js来定义我们的webpackconfiguration对象

const path = require('path');

const webpack = require('webpack')

module.exports = {
    context: __dirname, //指定文件的基本路径
    entry:{ //指定bundles，本例将`./src/index.js`作为app入口
        app: './src/index.js'
    },
    output:{
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
    }
};

contex指定文件的基本路径，entry用来指定bundles，本例中，src/index.js作为app入口，webpack将会输出app.js到dist文件夹中。

加载器
webpack将所有东西都像模块一样加载。使用loaders来加载CSS和其他asset文件。安装style-loader，css-loader，url-loader。

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

在webpack.config.js中添加两个module.rules，其中一个是用于CSS文件另一个用于其他静态文件。对于每一个rules，定义test控制加载文件的类型，use指定加载器列表。

const path = require('path');

const webpack = require('webpack')

module.exports = {
    context: __dirname, //指定文件的基本路径
    entry:{ //指定bundles
        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']
        }]
    }
};

插件
定义index.html，并且使用叫做html-webpack-plugin的webpackplugin将我们的包注入到该页面。首先安装：npm install --save-dev html-webpack-plugin
在webpack.config.js文件中添加插件需求require(html-webpack-plugin)，并将它添加到module.exports的plugins字段下。然后将sec/index.html作为我们的模版：

const path = require('path');

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    context: __dirname, //指定文件的基本路径
    entry:{ //指定bundles
        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'
        })
    ]
};

打包app

使用package.json来定义一个可以使用npm调用的脚本。添加build指令：

"sctipts":{
	"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，应该会看到下面的输出：

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

但是我自己运行得到了一个错误：
在这里插入图片描述
查了一下，由于webpack版本过高，需要安装一个webpack-cli即可解决这个问题。npm install webpack-cli。

运行开发服务

使用webpack-dev-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"
  }

在webpack.config.js文件底部添加下面的代码，告诉开发服务器文件目录是dist。

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

最后，我们终于可以运行这个程序：

npm start

结果报错：Cannot find module 'webpack-cli/bin/config-yargs'
在这里插入图片描述
查了一下，产生错误的原因是因为webpack-cli版本过高：

于是卸载现在的webpack-cli，安装低版本：
1、卸载当前的 webpack-cli npm uninstall webpack-cli
2、安装 webpack-cli 3.* 版本 npm install webpack-cli@3 -D
以上问题解决方法参考：https://www.cnblogs.com/jeacy/p/13864454.html
再次运行npm start，访问localhost:8080成功跑通！
在这里插入图片描述

将CesiumJS添加到一个webpack app中

安装CesiumJS

安装CesiumJS模块并将其添加到package.json文件中。
npm install --save-dev cesium

在webpack中配置CesiumJS

CesiumJS是一个大型而复杂的库。除了JavaScript模块，它还包括静态资产，如CSS、图像和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';

在configuration对象中添加以下选项，以解决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: ''：把webpack默认的在每行之前添加的一个\t制表符覆盖掉。CesiumJS有一些多行字符串，所以我们需要用一个空前缀覆盖这个默认值。
amd.toUrlUndefined: true：告诉CesiumJS, AMD webpack用来评估require语句的版本与标准的toUrl函数不兼容。
node.fs: 'empty：解决了fs模块的一些第三方使用，该模块的目标是在Node环境中使用，而不是在浏览器中使用。
创建一个cesium别名，这样我们可以在app代码中引用它。

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

管理CesiumJS静态文件

最后，确保正确地提供和加载了静态CesiumJS资产、小部件和web worker文件。
使用copy-webpack-plugin将静态文件复制到dist目录作为构建进程的一部分。
安装：npm install --save-dev copy-webpack-plugin
在webpack.config.js文件头部require它：
const CopywebpackPlugin = require('copy-webpack-plugin')
添加下面的plugin数组：

    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        // Copy Cesium Assets, Widgets, and Workers to a static directory
        new CopywebpackPlugin({ 
            patterns: [
                { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
                { from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
                { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }
            ]
        })
    ],

使用DefinePlugin定义一个环境变量，它告诉CesiumJS加载静态文件的基础URL。并在webpack.config.js文件的plugins数组中添加。

    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        // Copy Cesium Assets, Widgets, and Workers to a static directory
        new CopywebpackPlugin({ 
            patterns: [
                { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
                { from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
                { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }
            ]
        }),
        new webpack.DefinePlugin({
            // Define relative base path in cesium for loading assets
            CESIUM_BASE_URL: JSON.stringify('')
        })
    ],

在app中require CesiumJS模块

有几种方法可以在我们的应用程序中require CesiumJS模块。可以使用CommonJS语法或者ES6 import语句。

可以导入整个CesiumJS库，也可以只需要需要的特定模块。包含模块将导致webpack只编译这些模块及其依赖项，而不是编译整个库。

CommonJS风格的require
require全部CesiumJS：

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

require一个单独的模块：

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

ES6风格的import：

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

require asset files

webpack背后的理念是把每个文件都当作一个模块来对待。这使得导入资产和包含JavaScript是一样的。我们已经告诉webpack如何在我们的配置中使用加载器来加载每种类型的文件，所以我们只需要调用require。

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

Lafitteee拉菲

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录