Javascript 铯的ES6风格导入

我使用ChromeV61运行，它具有本机ES6支持

我在执行以下操作时出错：

import Cesium from '../node_modules/cesium/Build/Cesium/Cesium.js';

Uncaught SyntaxError: The requested module does not provide an export named 'default'

该模块包含在html文件中，包括：

 <script type="module" src="scripts/main.js"></script>

---

Cesium是一个node.js模块，这意味着它使用module.exports的node.js模块语法，而不是export default{}的ES6模块规范。为了在前端ES6中使用铯，您需要类似于或的东西，这将允许您使用从“铯”中导入的铯。

正如dcr24在其回答中所说，您可以将铯与Web包一起使用

安装铯

在网页包中配置铯

在webpack.config.js中

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

接下来，我们将向配置对象添加以下选项，以解决webpack编译铯的一些怪癖

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'
},

接下来，让我们添加一个铯别名，以便我们可以像传统节点模块一样在应用程序代码中轻松引用它

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

管理铯静态文件

最后，让我们确保静态铯资产、小部件和web工作者文件得到正确的服务和加载

npm install --save-dev copy-webpack-plugin

然后在webpack.config.js文件顶部附近需要它

const CopywebpackPlugin = require('copy-webpack-plugin');

此外，将以下内容添加到插件阵列中

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' } ])
],

我们正在按原样复制资产和小部件目录。此外，我们将使用构建的web worker脚本，这些脚本已经用RequireJS优化器编译和优化过。由于web Worker被设计为在自己的线程中单独运行，因此它们可以按原样加载和运行。web工作人员很少（如果有的话）需要以其原始形式进行调试。我们将从Build/Cesium/Workers目录复制这些文件

最后，我们将定义一个环境变量，该变量告诉Cesium使用内置在webpack中的DefinePlugin加载静态文件的基本URL。插件阵列现在将如下所示：

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('')
    })
],

在我们的应用程序中需要铯模块

CommonJS风格

要在一个对象下要求所有铯库，请执行以下操作：

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

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

需要单独的模块：

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

import Color from 'cesium/core/Color';
var color = Color.fromRandom();

ES6样式导入

要在一个对象下要求所有铯库：

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

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

需要单独的模块：

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

import Color from 'cesium/core/Color';
var color = Color.fromRandom();

更多详细信息可以在本教程中找到

---

如果您查看网络检查器，可以在官方存储库中找到代码示例

？您确定它正在加载正确的文件，并且实际上是ES6吗？您的../实例可能会移出脚本目录？这是CommonJS模块。