ES6 样式导入铯

Question

我是运行 Chrome V61，原生支持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>

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

完整代码：

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

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

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

Answer 1

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

Answer 2

正如 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 资产、小部件和网络工作文件。

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

我们正在复制 Assets 和 Widgets 目录 as-is。此外，我们将使用构建的网络工作者脚本，这些脚本已经使用 RequireJS 优化器进行了编译和优化。由于web worker被设计成运行单独在自己的线程中，所以可以加载运行as-is。 Web Workers 很少（如果有的话）以其原始形式进行调试。我们将从 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('')
    })
],

我们的应用程序需要 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 and Webpack。

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

ES6 样式导入铯

ES6 style import for cesium

javascript

ecmascript-6

cesium

javascript-import