11

これに関連するいくつかの StackOverflow の質問を見つけましたが、一致するものも問題を解決するものもありません。

ブラウザとサーバーで使用することを目的としたライブラリをES6で作成しています。サーバーまたはブラウザー ( popsicle、axios )で使用できるいくつかの 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 を umdNamedDefine に設定していますumd。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 の構成の問題であると推測されます。

これらの UMD スタイル ライブラリを ES6 にインポートし、サーバーとブラウザで使用できる Webpack と Babel でライブラリを生成するにはどうすればよいですか?

4

1 に答える 1