admin管理员组文章数量:1326134
I have have build process that is managed by Webpack. It bundles all my files up and generates a single bundle.js
file. Very typical pattern.
However, when I include that file bundle.js
in a webpage, the exported default function is undefined. Why can't I access that exported function from the global scope on a webpage?
Here is my webpack config:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
path: path.resolve('dist'),
filename: 'bundle.js',
},
performance: {
hints: false,
},
resolve: {
modules: ['node_modules', path.join(__dirname, 'src'), 'assets'],
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: 'file-loader',
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: `bundle.css`,
}),
],
};
Here is a simplified src/js/index.js
:
import util from './util';
import as dependency from 'external-library';
import EventEmitter from 'events';
/**
* MyLibrary module
* @module MyLibrary
* @class
* @param {MyLibraryOptions} options - Options to initialize the module with
* @returns {Object} MyLibrary instance
*/
export default function MyLibrary(options) {
if (!(this instanceof MyLibrary)) {
return new MyLibrary(options);
}
//...Do a bunch of stuff.
}
The goal is to include bundle.js
on a webpage and access in a script tag such as:
var instance = new MyLibrary({option_1: value, ...})
However, when I do this MyLibrary
is always undefined.
UPDATE:
After adding the library
property as in the webpack config, MyLibrary
is not undefined, but I can't call it. It's a module now.
UPDATE 2 --> SOLUTION:
module.exports = {
entry: './src/js/index.js',
output: {
library: 'MyLibrary',
libraryTarget: 'umd',
libraryExport: 'default',
path: path.resolve('dist'),
filename: 'bundle.js',
}
...
I have have build process that is managed by Webpack. It bundles all my files up and generates a single bundle.js
file. Very typical pattern.
However, when I include that file bundle.js
in a webpage, the exported default function is undefined. Why can't I access that exported function from the global scope on a webpage?
Here is my webpack config:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
path: path.resolve('dist'),
filename: 'bundle.js',
},
performance: {
hints: false,
},
resolve: {
modules: ['node_modules', path.join(__dirname, 'src'), 'assets'],
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: 'file-loader',
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: `bundle.css`,
}),
],
};
Here is a simplified src/js/index.js
:
import util from './util';
import as dependency from 'external-library';
import EventEmitter from 'events';
/**
* MyLibrary module
* @module MyLibrary
* @class
* @param {MyLibraryOptions} options - Options to initialize the module with
* @returns {Object} MyLibrary instance
*/
export default function MyLibrary(options) {
if (!(this instanceof MyLibrary)) {
return new MyLibrary(options);
}
//...Do a bunch of stuff.
}
The goal is to include bundle.js
on a webpage and access in a script tag such as:
var instance = new MyLibrary({option_1: value, ...})
However, when I do this MyLibrary
is always undefined.
UPDATE:
After adding the library
property as in the webpack config, MyLibrary
is not undefined, but I can't call it. It's a module now.
UPDATE 2 --> SOLUTION:
module.exports = {
entry: './src/js/index.js',
output: {
library: 'MyLibrary',
libraryTarget: 'umd',
libraryExport: 'default',
path: path.resolve('dist'),
filename: 'bundle.js',
}
...
Share
Improve this question
edited May 22, 2021 at 22:56
calbear47
asked Jul 13, 2019 at 21:16
calbear47calbear47
1,2113 gold badges21 silver badges42 bronze badges
4
- Is the last bit of code running the browser? – Calder White Commented Jul 13, 2019 at 21:17
- @CalderWhite Yes, I get an error that MyLibrary is undefined. – calbear47 Commented Jul 13, 2019 at 21:18
- How did you include the js in the webpage? <script src=".."> or some other way? – h00ligan Commented Feb 8, 2022 at 18:01
-
@h00ligan That's correct. I just included my JS file with a
script
(in my case,bundle.js
) tag before my library instantiates. – calbear47 Commented Feb 8, 2022 at 18:15
1 Answer
Reset to default 5In webpack the default scope is not global. It contains all your code in an anonymous function. To expose your library to the global scope of the browser, use this answer.
Your webpack config would look like this:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
library: 'MyLibrary',
path: path.resolve('dist'),
filename: 'bundle.js',
},
performance: {
hints: false,
},
resolve: {
modules: ['node_modules', path.join(__dirname, 'src'), 'assets'],
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: 'file-loader',
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: `bundle.css`,
}),
],
};
本文标签: javascriptExported function is undefined in bundlejs after webpack buildStack Overflow
版权声明:本文标题:javascript - Exported function is undefined in bundle.js after webpack build - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742190508a2430125.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论