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模块规范。为了在前端使用带有ES6的铯，您需要像Browserify或Webpack这样的东西，这将允许您使用import Cesium from 'cesium'。

Answer 2

正如dcr24在回答中所说，您可以在Webpack中使用铯。

安装铯

npm install --save-dev cesium

在Webpack中配置铯

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

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

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

管理铯静态文件

最后，让我们确保静态Cesium资产、小部件和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' } ])
],

我们正在按原样复制Assets和Widgets目录。此外，我们将使用构建的web工作程序脚本，这些脚本已经使用RequireJS优化器进行了编译和优化。由于web工作程序被设计为在自己的线程中单独运行，因此可以按原样加载和运行它们。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');

需要单独的模块：

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

ES6型进口

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

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

需要单独的模块：

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

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

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