Нужна помощь с ES6 модулями

272
05 марта 2017, 08:07

Написал небольшую библиотеку и теперь пытаюсь перевести её на ES6 но и сделать версию для обычного использования, чтобы просто подключить тег скрипта и использовать. Использую webpack и babel-loader. Код из основного файла библиотеки:

'use strict';
import helpers from './lib/helpers';
import styles from './lib/styles';
import color from './lib/color';
import decorators from './lib/decorators';
import forms from './lib/forms';
import DOM from './lib/DOM';
import namespace from './lib/namespace';
import addMethod from './lib/addMethod';
var eclipse = {
    globals: {},
    storage: {
        dropdowns: [],
        bundles: [],
        spinners: [],
        staticTabs: [],
        adaptiveTabs: [],
        searches: [],
        cache: {}
    },
    helpers: helpers,
    styles: styles,
    color: color,
    decorators: decorators,
    forms: forms,
    DOM: DOM,
    modules: {}
};
eclipse.namespace = namespace.bind(eclipse);
eclipse.addMethod = addMethod.bind(eclipse);
export default eclipse;

Настройки webpack:

var webpack = require('webpack');
module.exports = {
    entry: './eclipse.js',
    externals: {
        jquery: 'jQuery'
    },
    output: {
        path: __dirname,
        filename: 'eclipse.js',
        library: 'eclipse',
        libraryTarget: 'umd',
        umdNamedDefine: false
    },
    resolve: {
        extensions: ['', '.js']
    },
    module: {
        loaders: [
            {
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                },
                test: /\.js$/,
                exclude: /(node_modules)/
            }
        ]
    },
    devtool: null
};

Вроде все собирается хорошо, но есть одна проблема. При обычно подключении через тег скрипта в глобальную область попадает объект:

{
    __esModule: true,
    default: мой объект библиотеки eclipse
}

Получается что я не могу сделать так

eclipse.someMethod

Приходится так:

eclipse.default.someMethod

Как можно это обойти. Я с webpack не знаком особо. Я понимаю что такое происходит из-за "export default eclipse;", но как это обойти не знаю. Можно конечно написать "module.exports = eclipse;" но может есть другой способ? Может вообще мой способ сборки не подходит? Ничего подобного не делал раньше, поэтому может сделал глупости. Еще использую Gulp, но наверно его код вряд-ли тут нужен.

Answer 1

Во-первых export.default делает не webpack а транспайлер. В одном из ответах на гитхабе говорится, что:

webpack использует по стандарту вызов reqire, и если вы конвертируете в es5, он оборачивает import используя .default и возвращает обратно на export

И там как раз предлагают сделать module.exports = Library;.

Ещё как вариант попробуйте сделать

 export { foo as myFoo } from 'src/other_module';
READ ALSO
Проблемы с элементом <track>

Проблемы с элементом <track>

Всем привет! Вообщем не могу понять как сделать так чтобы когда наводишь мышку на субтитры в видео, то они передаются в переменнуюИспользую...

263
Вывести клиенту правильное время

Вывести клиенту правильное время

В БД заношу время в формате time(), те

245
Ошибка при выводе значения из MySQL

Ошибка при выводе значения из MySQL

alert выводит только значения, состоящие из цифрЕсли "подмешиваю" буквы - появляется ошибка Uncaught ReferenceError: yyyyyyyy is not defined

254
Не запоминает состояние radio

Не запоминает состояние radio

Здравствуйте! Есть тестирование из 5 вопросов - 5 "вкладок" с вопросами и кнопка "Завершить тест"В конце выдает результат сколько правильных...

226