使用 webpack ProvidePlugin 全局导入一个 javascript 文件
Import a javascript file globally using webpack ProvidePlugin
我有一个进行网络调用的功能,我希望该功能在全球范围内可用,而无需在每次需要使用该功能时都导入它
Request.js
import 'whatwg-fetch';
/**
* Parses the JSON returned by a network request
*
* @param {object} response A response from a network request
*
* @return {object} The parsed JSON from the request
*/
function parseJSON(response) {
if (response.status === 204 || response.status === 205) {
return null;
}
return response.json();
}
/**
* Checks if a network request came back fine, and throws an error if not
*
* @param {object} response A response from a network request
*
* @return {object|undefined} Returns either the response, or throws an error
*/
function checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response;
}
const error = new Error(response.statusText);
error.response = response;
throw error;
}
/**
* Requests a URL, returning a promise
*
* @param {string} url The URL we want to request
* @param {object} [options] The options we want to pass to "fetch"
*
* @return {object} The response data
*/
export default function request(url, options) {
return fetch(url, options)
.then(checkStatus)
.then(parseJSON);
}
Webpack.config.js
plugins: [
new webpack.ProvidePlugin({
fetch: 'exports-loader?self.fetch!whatwg-fetch',
request : require.resolve(path.join(process.cwd(),'app/utils/request.js'))
})]
所以当我尝试在任何其他文件中使用请求函数时,它会抛出一个错误 'Module not found'。我也曾尝试添加一个规则(Shimming),但也没有成功。
提前致谢:)
在Webpack docs中:
For importing the default export of an ES2015 module, you have to
specify the default property of module.
所以只需将您的配置更改为如下所示:
plugins: [
new webpack.ProvidePlugin({
fetch: 'exports-loader?self.fetch!whatwg-fetch',
request: [path.resolve('app/utils/request.js'), 'default']
})
]
我有一个进行网络调用的功能,我希望该功能在全球范围内可用,而无需在每次需要使用该功能时都导入它
Request.js
import 'whatwg-fetch';
/**
* Parses the JSON returned by a network request
*
* @param {object} response A response from a network request
*
* @return {object} The parsed JSON from the request
*/
function parseJSON(response) {
if (response.status === 204 || response.status === 205) {
return null;
}
return response.json();
}
/**
* Checks if a network request came back fine, and throws an error if not
*
* @param {object} response A response from a network request
*
* @return {object|undefined} Returns either the response, or throws an error
*/
function checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response;
}
const error = new Error(response.statusText);
error.response = response;
throw error;
}
/**
* Requests a URL, returning a promise
*
* @param {string} url The URL we want to request
* @param {object} [options] The options we want to pass to "fetch"
*
* @return {object} The response data
*/
export default function request(url, options) {
return fetch(url, options)
.then(checkStatus)
.then(parseJSON);
}
Webpack.config.js
plugins: [
new webpack.ProvidePlugin({
fetch: 'exports-loader?self.fetch!whatwg-fetch',
request : require.resolve(path.join(process.cwd(),'app/utils/request.js'))
})]
所以当我尝试在任何其他文件中使用请求函数时,它会抛出一个错误 'Module not found'。我也曾尝试添加一个规则(Shimming),但也没有成功。
提前致谢:)
在Webpack docs中:
For importing the default export of an ES2015 module, you have to specify the default property of module.
所以只需将您的配置更改为如下所示:
plugins: [
new webpack.ProvidePlugin({
fetch: 'exports-loader?self.fetch!whatwg-fetch',
request: [path.resolve('app/utils/request.js'), 'default']
})
]