Javascript 网页包与toastr
我正在尝试使用webpack作为依赖项加载和绑定toastr 这是整个webpack配置文件Javascript 网页包与toastr,javascript,webpack,webpack-2,toastr,Javascript,Webpack,Webpack 2,Toastr,我正在尝试使用webpack作为依赖项加载和绑定toastr 这是整个webpack配置文件 var path = require('path'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var webpack = require('webpack'); const DEVELOPMENT = process.env.NODE_ENV === 'development'; const PRODUCTION
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');
const DEVELOPMENT = process.env.NODE_ENV === 'development';
const PRODUCTION = process.env.NODE_ENV === 'production';
module.exports = {
entry: {
main: './wwwroot/js/mainEntry.js',
vendor: ['jquery', 'tether',
'bootstrap', 'jquery-colorbox',
'jquery-confirm', 'jquery-validation',
'jquery-validation-unobtrusive',
'toastr', 'jquery.nicescroll',]
},
output: {
filename: '/js/[name].js',
path: path.resolve(__dirname, 'wwwroot'),
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader?name=[name].[ext]&publicPath=/fonts/&outputPath=/fonts/'
},
{
test: /\.(png|jpe?g|gif|ico)$/,
loader: 'file-loader?name=[name].[ext]&publicPath=/images/&outputPath=/images/'
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
// (the commons chunk name)
filename: "/js/vendor.js",
// (the filename of the commons chunk)
minChunks: 2,
}),
new ExtractTextPlugin({
filename: 'css/[name].min.css'
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
};
我的条目js文件为
//JS
import 'jquery-colorbox';
import 'slick-carousel';
import toastr from 'toastr';
//CSS
import './../../node_modules/bootstrap/dist/css/bootstrap.css';
import './../../node_modules/slick-carousel/slick/slick.css';
import './../../node_modules/jquery-colorbox/colorbox.css';
import './../../node_modules/toastr/build/toastr.css';
import './../../node_modules/jquery-confirm/css/jquery-confirm.css';
import './../../node_modules/font-awesome/css/font-awesome.css';
import './../../Modules/Components/Menu/menu.css';
import './../../wwwroot/css/lahuritv.css';
创建包时没有任何错误。当我查看输出包时,可以看到toastr脚本包含在包中。但问题是变量toastr
在浏览器窗口中不可用
我试图寻找类似的问题,但没有找到任何。这是我第一次尝试学习网页。非常感谢您的帮助。Webpack不会公开您导入的模块,它将您的代码与所需的依赖项捆绑在一起,但它们仍然是模块化的,并且有自己的范围。Webpack并不是只是盲目地将所有文件的来源组合在一起,当然也不会使所有内容都全球化。如果您发布的条目文件是整个文件,那么您根本没有做任何事情 使用webpack,您可以在绑定的JavaScript文件中完成工作。也就是说,HTML中包含的所有内容都是由webpack创建的包,您不包括试图访问包中某些内容的其他脚本,而是直接在包中进行访问 当然,您可以在导入
toastr
后显式定义它:window.toastr=toastr
,从而将其公开给window
,但污染全局范围通常不是一个好主意,这与只在
标记中包含toastr
没有什么区别。如果捆绑包只是作为一个库使用,你可以看看。但我认为你只是在做一个普通的web应用程序,你应该把所有的代码放在一起,通过webpack打包,而不是在另一个
标签中依赖它
你应该阅读官方文件的指南。该示例非常小(创建一个DOM元素),但向您展示了webpack应用程序的概念,还使用了外部依赖项。简单解决方案:
//app.js
import toastr from 'toastr'
window.toastr = toastr
谢谢你的详细回答。我想我明白你的意思。toastr模块仅在捆绑脚本中可用,不作为全局变量公开,我需要对toastr执行的任何操作都必须在捆绑脚本中完成。但在我的例子中,toastr模块实际上需要在全局范围内可用,因为有一个ASP.NET库可以使用toastr动态地将脚本标记插入(服务器渲染)视图文件的body标记中。因此,我想我将不得不使用toastr作为某种外部依赖,这种依赖在全局范围内总是可用的。正确的,这通常是webpack方法。但是,如果你要将一个需要globals的旧网站转换为webpack,你仍然有可能公开一些需要的值。但一般来说,只要有可能,你应该避免使用globals,并将其保存在bundle中。你是对的。我正在转换一个旧网站,在这种情况下,我别无选择,只能暴露作为一个全局变量的ASTR。谢谢你的帮助。我现在已经解决了这个问题。