Импорт в стиле 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, что означает, что он использует синтаксис модуля node.js module.exports, а не спецификация модуля ES6 export default { }, Чтобы использовать Cesium с ES6 на внешнем интерфейсе, вам понадобится что-то вроде Browserify или Webpack, которое позволит вам использовать import Cesium from 'cesium',

Answer 2

Как сказал dcr24 в своем ответе, вы можете использовать Cesium с 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

Наконец, давайте удостоверимся, что статические файлы актива, виджета и веб-работника 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' } ])
],

Мы копируем каталоги Активы и Виджеты как есть. Кроме того, мы будем использовать встроенные веб-скрипты, которые уже скомпилированы и оптимизированы с помощью оптимизатора RequireJS. Поскольку веб-работники предназначены для работы отдельно в своем собственном потоке, их можно загружать и запускать как есть. Веб-работники редко, если вообще когда-либо, будут нуждаться в их первоначальной форме для отладки. Мы скопируем их из каталога Build/Cesium/Workers.

Наконец, мы определим переменную среды, которая сообщает Cesium базовый URL-адрес для загрузки статических файлов, используя DefinePlugin, встроенный в веб-пакет. Массив плагинов теперь будет выглядеть так:

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

Требуются модули цезия в нашем приложении

Общий стиль

Требовать, чтобы все библиотеки Цезия под одним объектом:

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();

Более подробную информацию можно найти в этом уроке Cesium и Webpack.

Образец кода можно найти в официальном репозитории.