我在 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"]
}
我能够在浏览器中通过将其包含在