javascript - 使用 ES6、Webpack 和 Babel 导入 UMD 样式模块

Question

我发现了一些与此相关的 StackOverflow 问题，但没有一个匹配或解决我的问题。

我正在用 ES6 编写一个库，旨在用于浏览器和服务器。我找到了一些可以在服务器或浏览器上使用的 HTTP 请求库( popsicle ， axios )。我已经在这两个地方成功地使用了这些库，但是在将它们导入我的源代码并使用输出的 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 库具有三种类型的消费者，这时 fetch 就派上用场了；

• Node.js - 尚未实现但可以使用 node-fetch 进行 polyfill仅使用节点库的常见行为(无重依赖性像 superagent、unirest 和 axios 等——这些增加了安全问题以及膨胀!)。
• 浏览器 - Fetch 是 WHATWG 标准，并且是在大多数现代浏览器中可用，但可能需要 npm 包例如 whatwg-fetch 来填充旧浏览器
• 同构/通用 - 在浏览器中运行相同的 javascript 和您在渐进式网络应用程序中找到的 node.js。他们需要使用名为 isomorphic-fetch 的库加载 whatwg-fetch 或node.js 版本的 fetch。

尽管它应该由项目使用者处理，因此 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 之前加载一个 fetch polyfill| .

我建议使用 rollup对于 UMD 库(see a working example I've contributed before for a UMD library)，但 Webpack 也不应该成为问题。与其尝试使用 Fetch 在您的应用程序中包含“axios”依赖项，不如将其保留并允许您的用户决定他们将如何加载包(即模块加载器、脚本、要求)。