11

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

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

4

1 回答 1

1

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

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

我建议对 UMD 库使用汇总（请参阅我之前为 UMD 库提供的工作示例），但 Webpack 也不应该成为问题。与其尝试在您的应用程序中使用 Fetch 包含“axios”依赖项，不如将其排除在外，让您的用户决定他们将如何加载包（即模块加载器、脚本、要求）。

于 2018-01-05T10:30:21.630 回答