使用ES6、Webpack和Babel导入UMD风格的模块

Question

我在 StackOverflow 上找到了一些相关的问题，但没有一个与我的问题相匹配或解决它。

我正在使用 ES6 编写一个库，旨在在浏览器和服务器上使用。我发现了一些 HTTP 请求库，可以在服务器或浏览器上使用 (popsicle, axios)。 我已经成功地在这两个地方使用了这些库，但是当我在我的源代码中导入它们并使用输出的 webpack 文件时，遇到了一些问题。

我正在导入 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"]
}

我能够在浏览器中通过将其包含在

- Jake Runzer

---

你不应该在服务器端使用Webpack。那是你问题的核心，与ES6、Babel或你提到的任何其他东西都无关。尝试不使用Webpack。 - blakeembrey

那么我应该如何创建压缩的库，以便随后发布到npm呢？ - Jake Runzer

你不需要这样做。那是一个糟糕的做法。Node 不需要被压缩的文件，浏览器才需要。压缩是打包工具的任务。这有很多原因，其中之一就是你放弃了版本控制和依赖管理（现在无法去重）。当然，你可以使用 Webpack 来处理 Node 代码，但请确保首先启用 Node 模式。不过你可能需要查询相关资料来了解更多细节。 - blakeembrey

Webpack现在实际上很好用。它们有选项可以作为包加载器运行，但您可能会发现使用Rollup更容易生成UMD包。 - sidhuko

Answer 1

为了使您的软件包尽可能小，我建议使用Fetch API。UMD库有三种类型的消费者，其中fetch非常方便：

- Node.js - 尚未实现，但可以使用node-fetch进行填充，只使用Node库（不使用超级代理、unirest和axios等庞大的依赖项 - 这些会增加安全问题以及臃肿！）。 - 浏览器 - Fetch是WHATWG标准，在大多数现代浏览器中可用，但可能需要一个npm包，例如whatwg-fetch来填充旧版浏览器。 - 同构/通用 - 与渐进式Web应用程序中发现的在浏览器和Node.js中运行的相同的JavaScript。它们需要使用一个叫做isomorphic-fetch的库来加载whatwg-fetch或fetch的Node.js版本。

然而，这应该由项目的使用者处理，所以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。

我建议对于UMD库使用rollup（看一个我之前为UMD库做出的工作示例），但Webpack也不是问题。与尝试在应用程序中使用Fetch包含'axios'依赖项不同，您可以将其留空并允许用户决定如何加载该软件包（即模块加载器，脚本，要求）。

- sidhuko