セシウムは：にReferenceError：セシウムは

Question

私はセットアップはWebPACKのテンプレートを使用して公式セシウムを使用してプロジェクトが、ここに発見した定義されていません。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の両方がノードモジュールとしてインストールされています。

Answer 1

私は、このようにグローバル変数セシウムを作ることによって私の問題を解決：

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