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

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

Answer 1

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

\n\n

\n
• Node.js - 尚未实现，但可以使用 node-fetch 来仅使用节点库来填充\n常见行为（没有重度依赖\n如 superagent、unirest 和 axios 等 - 这些增加了安全问题\n以及膨胀！）。
\n
• 浏览器 - Fetch 是 WHATWG 标准，\n可在大多数现代浏览器中使用，但可能需要 npm 包\n例如whatwg-fetch用于填充较旧的浏览器
\n
• 同构/通用 - 在浏览器和\nnode.js 中运行的 JavaScript 与渐进式 Web 应用程序中的相同。它们需要使用名为 isomorphic-fetch 的\n库来加载 Whatwg-fetch 或 \nnode.js 版本的 fetch。
\n

\n\n

不过，它应该由项目使用者处理，因此自述文件应该包括对上述三种类型用户的说明。

\n\n

Node.js和同构指令基本如下。

\n\n

require(\xe2\x80\x98node-fetch\xe2\x80\x99); // or require(\xe2\x80\x98isomorphic-fetch\xe2\x80\x99)\nconst MyUMDLibrary = require(\'my-umd-library\');\nconst myUMDLibrary = new MyUMDLibrary();\n

\n\n

对于使用 cdn 脚本的浏览器，他们还可以在https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js之前加载 fetch polyfill之前加载 fetch polyfill 。

\n\n

我建议对 UMD 库使用汇总（请参阅我之前为 UMD 库贡献的工作示例），但 Webpack 也不应该成为问题。您可以将其保留并允许用户决定如何加载包（即模块加载器、脚本、require），而不是尝试使用 Fetch 在应用程序中包含“axios”依赖项。

\n