Tag: webpack

在webpack中导入Blueimp jQuery文件上传

我正在导入这样的文件 import “blueimp-file-upload/js/vendor/jquery.ui.widget.js”; import “blueimp-file-upload/js/jquery.iframe-transport.js”; import “blueimp-file-upload/js/jquery.fileupload.js”; import “blueimp-file-upload/js/jquery.fileupload-image.js”; 并修改了webpack配置 resolve: { alias: { ‘load-image’: ‘blueimp-load-image/js/load-image.js’, ‘load-image-meta’: ‘blueimp-load-image/js/load-image-meta.js’, ‘load-image-exif’: ‘blueimp-load-image/js/load-image-exif.js’, ‘load-image-scale’: ‘blueimp-load-image/js/load-image-scale.js’, ‘canvas-to-blob’: ‘blueimp-canvas-to-blob/js/canvas-to-blob.js’, ‘jquery-ui/ui/widget’: ‘blueimp-file-upload/js/vendor/jquery.ui.widget.js’ } } 灵感来自于： 如何使用webpack的blueimp-file-upload？ 它正在编译好，但我在浏览器控制台中出错 app.js:1391 TypeError: $(…).fileupload is not a function jQuery是全局定义的，看起来像fileupload插件没有注册。 我不明白。

在反应路由器重定向上运行jquery脚本

我希望移植我使用主题的现有网站来利用反应组件。 主题有很多function，可以正确渲染UI（包括几个动画）。 主题的js导入了很多其他的js库。 这意味着我无法编写主题提供的任何UI元素的反应版本。 但是，实际的元素可以用作“哑组件”，我不需要任何数据绑定function。 我可以在我的public/html文件夹中导入我的js库的依赖项，这不是一个大问题。 真正的问题是我的主题库（我将称之为scripts.js）每次使用react-router进行重定向时都不会加载。 由于react-router实际上没有重新加载页面，因此我的scripts.js无法知道何时执行其UIfunction。 这里的讨论讨论了将scripts.js包装在一个函数中，并在每次在Router级别进行更新时调用它。 由于react-router 4没有onUpdate ，我决定订阅历史记录。 我这样做是这样的： import {createBrowserHistory} from ‘history’; const history = createBrowserHistory(); history.listen(() => { console.log(“url has changed”); }); export {history}; 现在我能够知道每次路由更改发生时，我现在需要的是实际上让scripts.js “加载”。 我的scripts.js很长，其中一些是专有的，所以我只在这里发布它的片段。 mr = (function (mr, $, window, document){ “use strict”; mr = mr || {}; var components = {documentReady: [],documentReadyDeferred: [], windowLoad: [], […]

反应wirh Webpack + Jquery + bootsrap

我是反应和webpack的新手，我发现错误我无法解决。 我懂了 ： bootstrap.min.js：6 Uncaught Error：Bootstrap的JavaScript需要jQuery 当我尝试在我的项目中导入bootstrap.js时，如下所示： import React from “react”; import ReacrDOM from “react-dom”; import “bootstrap/dist/css/bootstrap.min.css”; import “./assets/css/animate.min.css”; import “./assets/css/light-bootstrap-dashboard.css”; import “./assets/css/demo.css”; import “font-awesome/css/font-awesome.min.css”; import “./assets/css/pe-icon-7-stroke.css”; import $ from “jquery”; import “bootstrap/dist/js/bootstrap.min”; import “./assets/js/bootstrap-checkbox-radio-switch”; import “./assets/js/chartist.min”; import “./assets/js/bootstrap-notify”; import “./assets/js/light-bootstrap-dashboard”; import “./assets/js/demo”; 这是我的webpack.config.js var webpack = require(‘webpack’); var path = require(‘path’); var debug = […]

使用webpack和bootstrap-loader，$（…）。modal不是函数（…）错误

我在使用$(‘#modal-id’).modal(‘show’)函数打开模态时遇到问题。 在缩小问题范围后，我认为这与webpack加载我的依赖关系或特别是与jQuery依赖关系有关。 以下是我的webpack配置的必要部分： entry: { ‘js/bootstrap.bundle’: ‘bootstrap-loader’, ‘js/common.bundle’: [ path.join(PROJECT_ROOT, ‘resources/assets/js/common/app.js’), path.join(PROJECT_ROOT, ‘resources/assets/js/common/table.js’) ], … }, … plugins: [ new webpack.ProvidePlugin({ $: “jquery”, jQuery: “jquery”, “window.jQuery”: “jquery” }) ], 所以我的想法是所有加载了bootstrap的文件都应该进入一个文件js/bootstrap.bundle.js并且应该将jQuery依赖项加载到需要它的每个bundle中。 除了模态函数之外，bootstrap-loader完全适用于所有样式以及$和jQuery变量。 这是我的.bootstraprc文件： useFlexbox: true bootstrapVersion: 3 preBootstrapCustomizations: ./resources/assets/scss/partials/_variables.scss bootstrapCustomizations: ./resources/assets/scss/app.scss styleLoaders: – style – css – sass styles: mixins: true normalize: true print: true glyphicons: […]

webpack jquery和angular – jQuery没有定义

我正在将现有项目重构为webpack。 该项目使用angular（1.3）和jQuery（2.1）。 在初始网页上已经有一些jQuery函数被调用，但是这些函数失败了，因为’jQuery未定义’。 即使在加载页面后（通过控制台），jQuery仍未定义。 ‘$’已定义，但我不确定它是否实际指向jQuery。 我调整了webpack配置以在所有模块中公开jquery变量（如此处和几篇文章中所述）： new webpack.ProvidePlugin({ $: “jquery”, ‘window.jQuery’: “jquery”, ‘jQuery’: “jquery” }) 在我的入门书中，我有： import ‘jquery’; import ‘jquery-ui’; import ‘jquery-slimscroll/jquery.slimscroll’; … import angular from ‘angular’; import ‘angular-ui-router’; … 的package.json： “jquery”: “~2.1.1”, 现在我通过在条目html的头部手动导入jquery来解决它：

如何使用webpack添加jquery插件？

我使用带有角度2的webpack用于我的web应用程序我需要在我的应用程序中添加一个jquery滑块，所以我使用的是jquery插件。 我的jquery的webpack配置是 new ProvidePlugin({ jQuery: ‘jquery’, $: ‘jquery’, jquery: ‘jquery’ }) 上面的ProvidePlugin为我的应用程序提供了$和jQuery，但我还需要将jquery插件导入我的应用程序

Webpack 3.1。 jQuery被多次添加

迁移到Webpack 3后，我注意到jQuery包含的工作并不像我预期的那样。 我的模板结构有core / _global.html根模板，我在其中渲染常见的js和css资源，如： {% render_bundle ‘global’ ‘css’ %} {% block stylesheets %}{% endblock %} {% render_bundle ‘global’ ‘js’ %} {% block header_javascripts %}{% endblock %} 第二级模板扩展根模板并将其他js和css添加到html： {% extends “core/_global.html” %} {% load render_bundle from webpack_loader %} {% block stylesheets %} {% render_bundle ‘accounts/register’ ‘css’ %} {% endblock %} {% block javascripts %} {% […]

Webpack 2加载，公开和捆绑jquery和bootstrap

这已经被零碎地提出，但似乎没有人能够找到答案。 我只是想简单地尝试捆绑jquery那些引导程序，并在全局范围内公开$ ， JQuery和bootstrap 。 这是我的webpack.config.js var webpack = require(‘webpack’); module.exports = { entry: { accountdetails: ‘./src/main/webapp/public/js/accountdetails.js’, vendor_jquerybs: [‘jquery’, ‘bootstrap’] } , module:{ loaders: [{ test: /\.jsx?$/, exclude: /node-modules/, loader: ‘babel-loader’ }] }, resolve: { extensions: [‘.js’, ‘.jsx’] }, output: { path: __dirname + ‘/src/main/webapp/public/js/dist’, publicPath: ‘/’, filename: ‘[name].bundle.js’ }, devServer: { contentBase: ‘./dist’ } […]

使用Webpack进行简单的站点

我试图让webpack第一次工作，我在一个简单的网站上做，但无论我尝试什么，它都无法正常工作。 我已经坚持了几个星期，我认真尝试了每一个线程无济于事。 我只需要一个没有webpack问题的人查看我的代码并提供有关如何使其正常工作的评论。 我在src目录中有我的所有源代码。 库和开发人员依赖项位于node_modules目录中。 我想运行webpack并将其输出到dist目录。 如果我只使用src目录中的文件来运行服务器，它运行正常，但是一旦我运行webpack并尝试使用dist目录中的文件，它就会崩溃。 这是webpack.config.js： var webpack = require(‘webpack’); var path = require(‘path’); module.exports = { context: __dirname + “\\src”, debug: true, entry: “./index.webpack.js”, output: { path: __dirname + “\\dist”, filename: “index.min.js” }, module: { loaders: [ { test:/\.js$/, exclude:/(node_modules)/, loader:’babel-loader’, query: { presets:[‘es2015′] } }, { test:/\.css$/, exclude:/(node_modules)/, loader:’style-loader!css-loader’ }, { […]

使用Angular2 webpack的Primeng计划

我将在基于Angular2 webpack starter（ https://github.com/AngularClass/angular2-webpack-starter ）的项目中使用Primeng schedule（ http://www.primefaces.org/primeng/#/schedule ） 。 由于Primeng计划依赖于fullcalendar.js这是一个jQuery插件，我尝试通过webpack加载fullcalendar和jQuery。 我在这里按照例子（ https://github.com/cagataycivici/angular2-webpack-starter ）。 在package.json ，我将下面的设置添加到”devDependencies” “fullcalendar”: “^2.7.2”, “jquery”: “^2.2.4”, “jquery-ui”: “^1.10.5”, 并将以下设置添加到vendor.js import ‘script!jquery/dist/jquery.min.js’; import ‘script!moment/moment.js’; import ‘script!fullcalendar/dist/fullcalendar.js’; 但问题是即使实际存在标签，Primeng时间表也不会在网页中呈现。 我错过了什么？