Импорт модуля стиля UMD с помощью ES6, Webpack и Babel

Я нашел несколько вопросов StackOverflow, связанных с этим, но ни один из них не соответствует моей проблеме и не решает ее.

Я пишу библиотеку на ES6, предназначенную для использования в браузере и на сервере. Я нашел несколько библиотек HTTP-запросов, которые можно использовать на сервере или в браузере (эскимо, axios). Я успешно использовал эти библиотеки в обоих местах, но у меня возникли некоторые проблемы при их импорте в исходный код и использовании выходного файла в формате webpack.

Мой исходный файл ES6, в который я импортирую библиотеку axios,

import axios from 'axios';

export default {
    go: function() {
        return axios.get('http://www.google.com');
    }
};

Моя конфигурация веб-пакета

var webpack = require('webpack');
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
var WebpackNotifierPlugin = require('webpack-notifier');
var path = require('path');
var env = require('yargs').argv.mode;

var libraryName = 'library';
var source = '/src/test.js';

var plugins = [],
    outputFile;

if (env === 'build') {
    plugins.push(new UglifyJsPlugin({
        minimize: true
    }));
    outputFile = libraryName + '.min.js';
} else {
    outputFile = libraryName + '.js';
    plugins.push(new WebpackNotifierPlugin())
}

var config = {
    entry: __dirname + source,
    devtool: 'source-map',
    output: {
        path: __dirname + '/lib',
        filename: outputFile,
        library: libraryName,
        libraryTarget: 'umd',
        umdNamedDefine: true
    },
    externals: {},
    module: {
        loaders: [{
            test: /(\.jsx|\.js)$/,
            loader: 'babel',
            exclude: /(node_modules|bower_components)/
        }, {
            test: /(\.jsx|\.js)$/,
            loader: "eslint-loader",
            exclude: /node_modules/
        }]
    },
    resolve: {
        root: path.resolve('./src'),
        extensions: ['', '.js']
    },
    plugins: plugins
};

module.exports = config;

Как видите, я устанавливаю для libraryTarget значение umd, а для umdNamedDefine значение true.

А мой .bablerc

{
  "presets": ["es2015"],
  "plugins": ["add-module-exports", "babel-plugin-add-module-exports"]
}

Я могу использовать свою библиотеку в браузере, включив ее в тег script, но я не могу использовать ее при импорте с помощью node. Я получаю XMLHttpRequest is not defined. Библиотека axios говорит, что использует XMLHttpRequest в браузере и http при работе в узле, но по какой-то причине она не обнаруживает, что она запускается на сервере. У меня возникают проблемы с несколькими библиотеками UML, поэтому считаю, что это не конкретный пакет. Кроме того, поскольку я могу использовать эти библиотеки в узле ES5 без запуска webpack или babel, я предположил, что это проблема конфигурации с webpack.

Как я могу импортировать эти библиотеки стиля UMD в ES6 и создать библиотеку с помощью Webpack и Babel, которую можно использовать на сервере и в браузере?


webpack javascript babeljs ecmascript-6 umd
person Jake Runzer    schedule 17.05.2016    source источник
comment
Вы не должны использовать Webpack на стороне сервера. Это суть вашей проблемы, не связанная с ES6 или Babel или чем-то еще, о чем вы упомянули. Попробуйте без вебпака.   -  person blakeembrey    schedule 18.05.2016
comment
Но тогда как мне создать мини-библиотеку, которую я смогу опубликовать в npm?   -  person Jake Runzer    schedule 18.05.2016
comment
Вы не знаете. Это ужасная практика. Узлу не нужны мини-файлы, нужны браузеры. Минификация — это работа для упаковщиков. Для этого есть много причин, но одна из них — вы отказываетесь от управления версиями и зависимостей (сейчас вы не можете выполнять дедупликацию). Конечно, вы можете использовать Webpack для кода узла, но сначала убедитесь, что вы включили режим узла. Вы должны будете искать это все же.   -  person blakeembrey    schedule 19.05.2016
comment
Webpack теперь можно использовать. У них есть варианты для запуска в качестве загрузчика пакетов, но вам может быть проще использовать накопительный пакет для создания пакета UMD.   -  person sidhuko    schedule 05.01.2018

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы сделать ваш пакет как можно меньше, я бы рекомендовал использовать Fetch API. Библиотека UMD имеет три типа потребителей, где выборка пригодится;

  • Node.js — не реализован, но может использовать node-fetch для полифилла общего поведения, используя только библиотеки узлов (никаких тяжелых зависимостей, таких как superagent, unirest и axios и т. д. — они добавляют проблемы безопасности, а также раздувание!).
  • Браузер — Fetch является стандартом WHATWG и доступен в большинстве современных браузеров, но может потребоваться пакет npm, такой как whatwg-fetch, для полифилла в старых браузерах.
  • Isomorphic/Universal — тот же javascript, работающий в браузере и node.js, который вы найдете в прогрессивных веб-приложениях. Им нужно использовать библиотеку isomorphic-fetch для загрузки версии whatwg-fetch или node.js.

Тем не менее, этим должен заниматься потребитель проекта, поэтому README должен включать инструкции для каждого из трех типов пользователей, указанных выше.

Node.js и изоморфные инструкции в основном такие, как показано ниже.

require(‘node-fetch’); // or require(‘isomorphic-fetch’)
const MyUMDLibrary = require('my-umd-library');
const myUMDLibrary = new MyUMDLibrary();

Для браузеров, использующих скрипт cdn, они также могут загружать полифил выборки перед https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js.

Я предлагаю использовать свертку для библиотеки UMD (см. рабочий пример библиотеки UMD, который я ранее предоставил), но Webpack также не должен быть проблемой . Вместо того, чтобы пытаться включить зависимость «аксиос» в ваше приложение с помощью Fetch, вы можете оставить ее и позволить своим пользователям решать, как они будут загружать пакет (например, загрузчик модулей, скрипт, требование).

person sidhuko    schedule 05.01.2018