typescript - 具有Webpack和Typescript的Cesium:ReferenceError:未定义Cesium

我已经建立了一个项目使用官方铯与网页包模板，找到这里：https://github.com/AnalyticalGraphicsInc/cesium-webpack-example
然后我尝试将typescript支持添加到该项目中。它编译得很好，但在浏览器中，我得到以下错误：
ReferenceError: Cesium is not defined 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")
    }
}];

铯和typescript都作为节点模块安装。

最佳答案

我用这种方法把铯变成一个全局变量来解决我的问题：

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

关于typescript - 具有Webpack和Typescript的Cesium:ReferenceError:未定义Cesium，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47911186/