Я пытаюсь загрузить и связать 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 = 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]{amp}amp;publicPath=/fonts/{amp}amp;outputPath=/fonts/' }, { test: /.(png|jpe?g|gif|ico)$/, loader: 'file-loader?name=[name].[ext]{amp}amp;publicPath=/images/{amp}amp;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 не просто слепо объединяет источники всех файлов и, конечно, не делает все глобальным. Если входной файл, который вы разместили, является целым файлом, то вы вообще ничего не делаете.

Вместо этого с веб-пакетом вы выполняете работу с файлами JavaScript, которые вы связываете. Так сказать, все, что вы включаете в свой HTML, это пакеты, созданные веб-пакетом, вы не включаете другие скрипты, которые пытаются получить доступ к чему-либо в пакете, а скорее делаете это непосредственно в своем пакете.

Конечно, вы можете открыть его для window , явно определив его: window.toastr = toastr после импорта toastr , но загрязнение глобальной области видимости, как правило, не очень хорошая идея, и оно ничем не отличается от простого включения toastr в {amp}lt;script{amp}gt; . Если пакет просто предполагается использовать в качестве библиотеки, вы можете взглянуть на Authoring Libraries . Но я думаю, что вы просто делаете обычное веб-приложение, и вы должны собрать весь код вместе для веб-пакета, а не полагаться на него в другом {amp}lt;script{amp}gt; .

Вам следует ознакомиться с руководством по началу работы для официальных документов. Пример очень крошечный (создает один элемент DOM), но показывает концепцию приложений веб-пакета, а также использует внешнюю зависимость.

Простое решение:

 //app.js import toastr from 'toastr' window.toastr = toastr