0

我正在使用具有原生 ES6 支持的 Chrome V61 运行。

当我这样做时出现错误：

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>

也许它与 ES6 模块不兼容，但我有机会对此进行填充吗？

完整代码：

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

console.log("I'm the entry point");

var viewer = new Cesium.Viewer('cesiumContainer');
4

2 回答 2

1

Cesium 是一个 node.js 模块，这意味着它使用 node.js 模块语法module.exports，而不是 ES6 模块规范export default { }。为了在前端使用 Cesium 和 ES6，你需要Browserify或Webpack 之类的东西，这将允许你使用import Cesium from 'cesium'.

于 2017-11-03T17:49:19.577 回答
0

正如 dcr24 在他的回答中所说，您可以将 Cesium 与 Webpack 一起使用。

安装铯

npm install --save-dev cesium

在 Webpack 中配置 Cesium

在 webpack.config.js 中

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

接下来，我们将以下选项添加到我们的配置对象中，以解决 webpack 如何编译 Cesium 的一些怪癖。

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

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

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

管理 Cesium 静态文件

最后，让我们确保静态 Cesium 资产、小部件和 Web Worker 文件被正确地提供和加载。

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

然后在我们的 webpack.config.js 文件顶部附近要求它。

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

此外，将以下内容添加到 plugins 数组中。

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

我们按原样复制 Assets 和 Widgets 目录。此外，我们将使用已使用 RequireJS 优化器编译和优化的已构建 Web Worker 脚本。由于 Web Worker 被设计为在自己的线程中单独运行，因此它们可以按原样加载和运行。很少（如果有的话）以原始形式需要 Web Worker 进行调试。我们将从 Build/Cesium/Workers 目录中复制这些内容。

最后，我们将定义一个环境变量，告诉 Cesium 使用 webpack 中内置的 DefinePlugin 加载静态文件的基本 URL。plugins 数组现在看起来像这样：

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

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

CommonJS 风格

要求一个对象下的所有 Cesium 库：

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

需要一个单独的模块：

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

ES6 风格导入

要求一个对象下的所有 Cesium 库：

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

需要一个单独的模块：

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

更多详细信息可以在本教程Cesium 和 Webpack中找到。

代码示例可以在官方存储库Cesium Webpack Example中找到

于 2018-03-20T15:37:32.400 回答