Question

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

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")
    }
}];

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

Answer 1

我通过这种方式将Cesium变成一个全局变量来解决我的问题：

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

Answer 2

您的 CESIUM_BASE_URL 必须是您应用的基础。

   new DefinePlugin({
        // whatever the base is www.example.com, http://localhost or whatever
        CESIUM_BASE_URL: JSON.stringify('http://localhost/'),
      }),

使用Webpack和Typescript的Cesium：ReferenceError：未定义Cesium

2 个答案: