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

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

Answer 1

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

Node.js - 尚未实现，但可以使用node-fetch进行polyfill 仅使用节点库的常见行为（没有重依赖性像superagent，unirest和axios等 - 这些增加了安全性问题还有膨胀！）。
浏览器 - Fetch是WHATWG标准在大多数现代浏览器中都可用，但可能需要npm包例如whatwg-fetch以填充旧浏览器
Isomorphic / Universal - 在浏览器中运行的相同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之前加载获取填充。

我建议将rollup用于UMD库（see a working example I've contributed before for a UMD library），但Webpack也不应该成为问题。与使用Fetch在应用程序中包含'axios'依赖关系不同，您可以将其保留，并允许用户决定如何加载包（即模块加载器，脚本，要求）。

使用ES6，Webpack和Babel导入UMD样式模块

1 个答案: