使用ES6，Webpack和Babel導入UMD樣式模塊

Question

我發現了一些與此相關的StackOverflow問題，但沒有一個匹配或解決了我的問題。

我正在用ES6編寫一個庫，該庫打算在瀏覽器和服務器上使用。 我發現，可以在服務器或瀏覽器（使用幾個HTTP請求庫冰棒 ， 愛可信 ）。 我已經在兩個地方都成功使用了這些庫，但是在將它們導入到源中並使用輸出的webpacked文件時遇到了一些問題。

我要導入axios庫的ES6源文件是

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標簽中包含庫，我可以在瀏覽器中使用它，但是在與node一起導入時，我將無法使用它。 我得到一個XMLHttpRequest is not defined 。 axios庫表示在瀏覽器上使用XMLHttpRequest，在節點上運行時使用http，但是由於某種原因，它沒有檢測到它正在服務器上運行。 我在一些UML庫中遇到了這個問題，因此相信它不是特定的程序包。 另外，由於我可以在不運行webpack或babel的情況下在節點ES5中使用這些庫，因此我被認為是webpack的配置問題。

如何在ES6中導入這些UMD樣式庫，並使用Webpack和Babel生成可在服務器和瀏覽器上使用的庫？

Answer 1

為了使您的程序包盡可能小，我建議使用Fetch API。 UMD庫具有三種方便使用的消費者類型。

• Node.js-尚未實現，但可以使用node-fetch來僅使用節點庫來填充常見行為（不存在諸如superagent，unirest和axios等繁重的依賴關系-這些都增加了安全隱患，而且讓人腫！）。
• 瀏覽器-Fetch是WHATWG標准，可在大多數現代瀏覽器中使用，但可能需要npm軟件包（如whatwg-fetch來whatwg-fetch舊版瀏覽器
• Isomorphic / Universal-在漸進式Web應用程序中的瀏覽器和node.js中運行的相同javascript，它們需要使用一個稱為isomorphic-fetch的庫來加載whatwg-fetch或node.js版本的fetch。

盡管它應該由項目使用者處理，所以自述文件應包括針對上述三種類型的用戶的說明。

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之前加載提取polyfill。

我建議對UMD庫使用匯總 （ 請參閱我之前為UMD庫提供的工作示例 ），但Webpack也不應該成為問題。 與其嘗試在Fetch中不將“ axios”依賴項包含在應用程序中，還可以忽略它，讓用戶決定如何加載程序包（即模塊加載器，腳本，require）。