Importowanie modułu stylu UMD za pomocą ES6, Webpack i Babel

Question

Znalazłem kilka pytań związanych z tym problemem, ale żaden z nich nie pasuje ani nie naprawia mojego problemu.

Piszę bibliotekę w ES6, która ma być używana w przeglądarce i na serwerze. Znalazłem kilka bibliotek żądań HTTP, które mogą być używane na serwerze lub przeglądarce (popsicle, axios). Z powodzeniem korzystałem z tych bibliotek w obu miejscach, ale mam pewne problemy podczas importowania ich w moim źródle i korzystania z wyjściowego pliku Webpacked.

My ES6 plik źródłowy, gdzie jestem importowania biblioteki axios jest

import axios from 'axios'; 

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

Moja WebPack config jest

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; 

Jak widać jestem ustawiania libraryTarget do umd i umdNamedDefine do true

I moja .bablerc jest

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

jestem w stanie wykorzystać moją bibliotekę w przeglądarce poprzez włączenie go w script tagu, ale nie jestem w stanie go używać podczas importowania z węzła. Otrzymuję XMLHttpRequest is not defined. Biblioteka axios mówi, że używa XMLHttpRequest w przeglądarce i http, gdy działa w węźle, ale z jakiegoś powodu nie wykrywa, że ​​jest uruchamiany na serwerze. Mam problem z kilkoma bibliotekami UML, wiec nie jest to specyficzny pakiet. Ponadto, ponieważ mogę używać tych bibliotek w węźle ES5 bez uruchamiania webpacka lub babel, jestem przekonany, że jest to problem z konfiguracją w pakiecie sieci Web.

Jak mogę zaimportować te biblioteki stylów UMD do ES6 i wygenerować bibliotekę z Webpack i Babel, które mogą być używane na serwerze i przeglądarce?

Answer 1

Aby pakiet był jak najmniejszy, polecam korzystanie z interfejsu API pobierania. Biblioteka UMD ma trzy typy konsumentów, w których przydaje się pobieranie;

• node.js - nie wdrożył, ale mogą korzystać z węzła-sprowadzić do PolyFill wspólne zachowanie używając tylko bibliotek węzeł (brak ciężkich Zależności jak superagent, unirest i Axios etc - to dodać zabezpieczenie dotyczy jak uwędzić !).
• Browser - Fetch jest WHATWG standardowe i jest dostępne w większości nowoczesnych przeglądarek, ale może wymagać pakiet npm takich jak whatwg-fetch do PolyFill starszych przeglądarek
• izomorficzna/Universal - to samo javascript działa w przeglądarce i node.js które można znaleźć w progresywnych aplikacjach internetowych. Muszą one użyć biblioteki o nazwie isomorphic-fetch, aby załadować pobieranie whatwg-download lub pobranie .js .js.

Powinien on być obsługiwany przez klientów projektu, dlatego też README powinien zawierać instrukcje dla każdego z powyższych trzech typów użytkowników.

Node.js i instrukcje izomorficzne są w zasadzie jak poniżej.

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

Dla przeglądarek wykorzystujących skrypt z cdn mogli również załadować sprowadzić PolyFill przed https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js.

Proponuję użyć rollup dla biblioteki UMD (see a working example I've contributed before for a UMD library), ale pakiet Webpack również nie powinien stanowić problemu. Zamiast próbować dołączyć zależność "axios" w aplikacji za pomocą narzędzia Fetch, można ją pominąć i pozwolić użytkownikom na podjęcie decyzji, w jaki sposób załadują pakiet (tj. Moduł ładujący, skrypt, wymagają).