Tag: webpack

如何在Webpack中包含jQuery CDN？: 由于jQuery的CDN版本很可能被缓存。有没有办法在webpack中包含CDN版本而不是本地npm版本。如果没有在页面上加载jQuery，在Webpack中包含jQuery的最佳方法是什么？

使用webpack 2加载jQuery插件: 在谷歌搜索和尝试的大部分时间后 – 我没有让它工作，在这一点上，我不知道缺少什么。我已经在webpack.common.js中运行了jQuery（并validation了它的工作原理）： new ProvidePlugin({ jQuery: ‘jquery’, $: ‘jquery’, jquery: ‘jquery’ }) 例如，我有一个“MetisMenu”插件，我应该在哪里配置它？我在app.module.ts中尝试了各种require/include组合。喜欢（包括将它们分配给常量/ var但导入/需要总是给出这个错误）： import ‘metismenu’; jQuery(…).metisMenu is not a function import { metisMenu } from ‘metismenu’; Cannot assign to read only property ‘exports’ of object ‘#’ require (‘metismenu’); Cannot assign to read only property ‘exports’ of object ‘#’ import * as […]

如何将bootstrap 3添加到基于Angular2 webpack的项目中: 我已经为jquery和bootstrap安装了npm包，然后在vendor.ts添加了导入，但是我仍然没有在浏览器上显示任何引导程序样式。 … import ‘jquery/dist/jquery.js’ import ‘bootstrap/dist/css/bootstrap.css’; import ‘bootstrap/dist/js/bootstrap.js’; … 我也尝试在webpack.common.js添加另一个条目，但这也没有帮助。 entry: { ‘bootstrap’: ‘./node_modules/bootstrap/dist/css/bootstrap.min.css’, ‘polyfills’: ‘./src/polyfills.ts’, ‘vendor’: ‘./src/vendor.ts’, ‘main’: ‘./src/main.browser.ts’ } 任何帮助将不胜感激，谢谢。

如何在create-react-app中使用jQuery依赖的插件: 我想在我的使用create-react-app React应用程序中使用bootstrap和其他jQuery插件（datepicker，carousel，…）。以下是我导入jQuery和bootstrap的方法： import React, { Component } from ‘react’; import ‘bootstrap/dist/css/bootstrap.min.css’; import $ from ‘jquery’; window.jQuery = window.$ = $; import ‘bootstrap/dist/js/bootstrap.min’; 我收到以下错误： ./src/App.js Line 5: Import in body of module; reorder to top import/first Search for the keywords to learn more about each error. 请注意，我不想使用react-bootstrap包。

带有Typescript的Jquery：’ElementFinder’类型中不存在属性’css’: 我正在尝试在我的angular2项目中使用jquery，它正在使用webpack进行构建。我从这里得到了webpack angular2入门套件：这里但是，由于我的构建失败，我无法弄清楚如何摆脱这些错误。这是我的typings.json { “globalDependencies”: { “angular-protractor”: “registry:dt/angular-protractor#1.5.0+20160425143459”, “angular2-beta-to-rc-alias”: “file:./node_modules/@angularclass/angular2-beta-to-rc-alias/src/beta-17/typings.d.ts”, “core-js”: “registry:dt/core-js#0.0.0+20160317120654”, “hammerjs”: “registry:dt/hammerjs#2.0.4+20160417130828”, “jasmine”: “registry:dt/jasmine#2.2.0+20160505161446”, “jquery”: “github:DefinitelyTyped/DefinitelyTyped/jquery/jquery.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd”, “node”: “registry:dt/node#6.0.0+20160514165920”, “selenium-webdriver”: “registry:dt/selenium-webdriver#2.44.0+20160317120654”, “source-map”: “registry:dt/source-map#0.0.0+20160317120654”, “uglify-js”: “registry:dt/uglify-js#2.6.1+20160316155526”, “webpack”: “registry:dt/webpack#1.12.9+20160321060707” } } 我试过了： typings install dt~jquery –global –save 同样，但错误仍然存在： Property ‘css’ does not exist on type ‘ElementFinder’. 而且： Subsequent variable declarations must have […]

如何使用react创建多个页面应用程序: 我使用react js创建了一个单页Web应用程序。我使用webpack来创建所有组件的捆绑。但现在我想创建许多其他页面。大多数页面都与API调用相关。即在index.html ，我显示了API内容。我想在另一个页面中插入内容，从API中解析数据。 Webpack压缩文件中的所有响应，即bundle.js 。但是， webpack的配置如下： const webpack = require(‘webpack’); var config = { entry: ‘./main.js’, output: { path:’./’, filename: ‘dist/bundle.js’, }, devServer: { inline: true, port: 3000 }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: ‘babel’, query: { presets: [‘es2015’, ‘react’] } } ] }, […]

没有定义jQuery（使用Webpack）: 我有三个脚本： main.min.js是我用Webpack创建的文件。这个文件包含了我的项目所需的所有脚本，包括我作为NPM包安装的jQuery。 script-A.js和script-B.js是脚本，遗憾的是我不能包含在我的主Webpack文件中，因此我需要单独加载它们。这些脚本需要jQuery作为依赖项; 但即使jQuery包含在main.min.js ，我也会在调用jQuery is not defined时jQuery is not defined错误。顺便说一句，在我的Webpack文件中，我已经有了这些代码行，这让我在通过Webpack处理的任何脚本中使用jQuery，但它似乎对其他脚本没有任何影响： new webpack.ProvidePlugin({ $: ‘jquery’, jQuery: ‘jquery’, “window.jQuery”: ‘jquery’ }) 我该如何修复错误？理想情况下，我需要一个解决方案，我不需要触及script-A.js和script-B.js因为它们属于一个插件。 CONSOLE SNIPPET Uncaught ReferenceError: jQuery is not defined at script-A.js?ver=2.9.6:1 Uncaught ReferenceError: jQuery is not defined at script-B.js:617 at script-B.js:620 PACKAJGE.JSON { “name”: “mysite”, “version”: “1.0.0”, “description”: “mysite”, “main”: “webpack.config.js”, […]

使用webpack在Angular2中包含jQuery并从组件访问它: 我想在我的Angular2-Application中包含jQuery和SignalR，并使用webpack连接所有内容。因此我通过npm安装了jQuery。的package.json “dependencies”: { // … “jquery”: “2.1.4”, // … }, 文件和文件夹已正确安装。我现在在vendor.ts中定位这些文件以获取webpack以查找并包含它们： import ‘jquery’; import ‘bootstrap/dist/js/bootstrap.js’; import ‘../../bower_components/signalr/jquery.signalR’; 并且webpack获取这些文件并将它们连接起来。我可以在我的vendor.js中看到这个。 jQuery出现在那里。还有jquery signalR-File。我的webpack.config： var webpack = require(“webpack”); var HtmlWebpackPlugin = require(‘html-webpack-plugin’); module.exports = { entry: { “vendor”: “./wwwroot/app/vendor”, “polyfills”: “./wwwroot/app/polyfills”, “app”: “./wwwroot/app/boot” }, output: { path: __dirname, filename: “[name]-[hash:8].bundle.js” }, resolve: { […]

Webpack bundle – Bootstrap的JavaScript需要jQuery: 我想要实现以下目标： bundle （按此顺序） jquery ， tether和bootstrap.js 。在HTML页面中加载此包，在其下方加载其他页面特定的脚本。为此，我使用webpack 2和CommonsChunkPlugin 。这是我的配置。对于我有的entries ： const scriptsEntry = { blog_index: SRC_DIR + “/js/pages/blog_index.js”, blog_about: SRC_DIR + “/js/pages/blog_about.js”, vendor: [“jquery”, “tether”, “bootstrap”] }; 在plugins部分： scriptsPlugins.push( new webpack.optimize.CommonsChunkPlugin({ name: “vendor”, filename:”vendor.bundle.js”, minChunks: 2 }), … })); 在’index.html’里面我加载了包：在blog_index.js的源目录blog_index.js我使用了jquery ： import $ from “jquery”; $(“.home-click”).click(function () { […]

找不到webpack模块：错误：无法解析’jquery’: 当我运行’webpack’命令时，我收到此错误： ./js/main.js中的错误找不到模块：错误：无法解析’… \ js’中的’jquery’@ ./js/main.js 3：0-16 4：0-23 在package.json我有： “devDependencies”: { “handlebars”: “^4.0.6”, “handlebars-loader”: “^1.4.0”, “jquery”: “^3.2.1”, “path”: “^0.12.7” }, 在webpack.config.js中： var path = require(“path”); module.exports = { entry: “./js/main.js”, output: { path: __dirname + “/js”, filename: “scripts-bundled.js” }, resolve: { modules: [ path.join(__dirname, “js/helpers”) ] }, module: { loaders: [ {test: /\.hbs$/, loader: “handlebars-loader”} ] […]