typescript - Cesium 与 Webpack 和 Typescript : ReferenceError: Cesium is not defined

Question

我已经使用带有 webpack 模板的官方 cesium 设置了一个项目，可在此处找到:https://github.com/AnalyticalGraphicsInc/cesium-webpack-example然后我尝试为该项目添加 typescript 支持。它编译得很好，但在浏览器中出现以下错误:

ReferenceError: Cesium 未定义 index.ts:12:4

这是我的 index.ts 脚本:

/// <reference path="custom_typings/cesium/index.d.ts" />
require('cesium/Widgets/widgets.css');
require('./css/main.css');
require('cesium/Cesium');

// Example app
let viewerOptions : Cesium.ViewerOptions = {
    scene3DOnly: true,
    selectionIndicator: false,
    baseLayerPicker: false
}
let viewer = new Cesium.Viewer('cesiumContainer', viewerOptions);

这是我的 webpack.config:

const path = require('path');

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

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

module.exports = [{
    context: __dirname,
    entry: {
        app: './src/index.ts'
    },
    devtool: 'inline-source-map',    
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),

        // Needed by Cesium for multiline strings
        sourcePrefix: ''
    },
    amd: {
        // Enable webpack-friendly use of require in cesium
        toUrlUndefined: true
    },
    node: {
        // Resolve node module use of fs
        fs: "empty"
    },
    resolve: {
        extensions: [ '.tsx', '.ts', '.js' ],
        alias: {
            // Cesium module name
            cesium: path.resolve(__dirname, cesiumSource)
        }
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
            use: ['url-loader']
        }, {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
          }]
    },
    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('')
        }),
        // Split cesium into a seperate bundle
        new webpack.optimize.CommonsChunkPlugin({
            name: 'cesium',
            minChunks: function (module) {
                return module.context && module.context.indexOf('cesium') !== -1;
            }
        })
    ],

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

Cesium 和 typescript 都安装为节点模块。

Answer 1

我通过以这种方式将 Cesium 设置为全局变量解决了我的问题:

const cs = require("cesium/Cesium");
(<any>window).Cesium = cs