使用 ES6、Webpack 和 Babel 导入 UMD 样式模块答案

【问题标题】：Importing UMD style module with ES6, Webpack, and Babel使用 ES6、Webpack 和 Babel 导入 UMD 样式模块
【发布时间】：2016-05-17 06:57:30
【问题描述】：

我发现了一些与此相关的 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 标记中来在浏览器中使用我的库，但是在使用节点导入时我无法使用它。我得到一个XMLHttpRequest is not defined。 axios 库表示它在浏览器上使用 XMLHttpRequest，在节点中运行时使用 http，但由于某种原因，它没有检测到它正在服务器上运行。我在一些 UML 库中遇到了这个问题，所以相信它不是特定的包。此外，由于我可以在节点 ES5 中使用这些库而无需运行 webpack 或 babel，因此我被认为是 webpack 的配置问题。

如何在 ES6 中导入这些 UMD 样式库，并生成一个可以在服务器和浏览器上使用的带有 Webpack 和 Babel 的库？

【问题讨论】：

你不应该在服务器端使用 Webpack。这是您问题的核心，与 ES6 或 Babel 或您提到的任何其他内容无关。尝试不使用 Webpack。
但是我应该如何创建可以发布到 npm 的缩小库？
你没有。这是一种可怕的做法。 Node 不需要压缩文件，浏览器需要。缩小是捆绑商的工作。这有很多原因，但其中一个原因是 - 您选择退出版本控制和依赖项（您现在无法进行重复数据删除）。当然，您可以将 Webpack 用于节点代码，但请确保先启用节点模式。不过你得查一下。
Webpack 现在可以用了。他们可以选择作为包加载器运行，但您可能会发现使用汇总更容易生成 UMD 包

标签： javascript ecmascript-6 webpack babeljs umd

【解决方案1】：

为了使您的包尽可能小，我建议使用 Fetch API。 UMD 库有 fetch 派上用场的三种类型的使用者；

Node.js - 尚未实现，但可以使用 node-fetch 来填充仅使用节点库的常见行为（没有严重的依赖关系像 superagent、unirest 和 axios 等 - 这些增加了安全问题以及膨胀！）。
浏览器 - Fetch 是 WHATWG 标准，是在大多数现代浏览器中可用，但可能需要 npm 包例如 whatwg-fetch 填充旧版浏览器
同构/通用 - 在浏览器中运行的相同 javascript 和您在渐进式 Web 应用程序中找到的 node.js。它们需要使用名为 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 之前加载 fetch polyfill。

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

【讨论】：