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

Question

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

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

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

import axios from 'axios'; 

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

Мой WebPack конфигурации является

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, но я не могу ее использовать при импорте с узлом. Я получаю XMLHttpRequest is not defined. В библиотеке axios говорится, что он использует XMLHttpRequest, когда в браузере и http при запуске в узле, но по какой-то причине он не обнаруживает, что он запускается на сервере. У меня возникли проблемы с несколькими библиотеками UML, поэтому верьте, что это не конкретный пакет. Кроме того, поскольку я могу использовать эти библиотеки в узле ES5 без запуска webpack или babel, мне кажется, что это проблема конфигурации с webpack.

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

Answer 1

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

• Node.js - не реализован, но может использовать узел-выборки для polyfill общего поведения, используя только узел библиотеки (без тяжелых зависимостей как SuperAgent, unirest и Вардар и т.д. - это добавление безопасности касается , а также вздутия !).
• Browser - Fetch является WHATWG стандарта и доступны в большинстве современных браузеров, но может потребоваться пакет NPM , такие как whatwg-fetch в polyfill старых браузеров
• изоморфных/Universal - то же Javascript работает в браузере и node.js которые вы найдете в прогрессивных веб-приложениях. Они должны использовать библиотеку , называемую изоморфной выборкой, для загрузки либо 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 они могут также загружать выборку polyfill перед тем https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js.

Я бы предложил использовать rollup для библиотеки UMD (see a working example I've contributed before for a UMD library), но Webpack тоже не должен быть проблемой. Вместо того, чтобы пытаться включить зависимость «axios» в приложении с помощью Fetch, вы можете оставить его и позволить своим пользователям решать, как они будут загружать пакет (например, загрузчик модуля, сценарий, требуется).