1. IT宝库
  2. 编程技术问答
  3. frontend
以下是关于 frontend 的编程技术问答
如果启用了热模块替换，为什么在Webpack中改变HTML时LiveReload不起作用？
如果您在devServer devServer webpack 的设置中设置hot: true，则热模块更换 css Works的工作，并且在没有完整页面的无需完整页面的情况下应用了更改.但是，当更改HTML文件时， livereload 由于某种原因不起作用，您需要手动刷新页面，以便应用更改. 如果hot: true在devServer配置文件中被禁用，则在更改HTML文件 livereload 正常工作时，页面本身可以重新加载，但是热模块更换对于CSS，当CSS更改页面完全重新加载时不起作用. 这应该是应该的吗?为什么会发生这种情况，我如何为CSS启用热模块更换，但同时又可以使 livereload 在更改HTML文件时工作? 要创建许多HTML文件，我使用HtmlWebpackPlugin插件. 以下是配置文件: webpack.common.js const path = require('path'); const { CleanWebpac
0 2023-12-01
编程技术问答社区
如何将WordPress集成到Webpack中？
我使用HTML/CSS，JavaScript和Sass或SCSS开发了一个网站前端.我使用了npm. 我需要将该网站放入WordPress.我已经安装了WordPress，并将该文件夹放置在所有资产(HTML/CSS，JS，SASS等)中. 现在，我现在该怎么办?我该如何连接所有这些? 我知道这是可能的，因为我之前曾在这样的网站上工作过，但不确定如何从头开始. WebPack-> WordPress.我将使用NPM或WebPack观看文件，但是托管将与MAMP一起使用 - 这就是我在工作中进行的. 我该怎么办? 这是网站代码(如果有的话): ps，没有WordPress API或任何类似的内容，但是就像我在上面写的那样. 解决方案 我找到了解决方案. 这很简单.您需要编译所有内容，并将其放入WordPress将使用的文件夹中，并执行WordPress Magic来获得功能的样式. 我在这里做到了:这不是完美的，但是对于那些正在
2 2023-12-01
编程技术问答社区
如何将CSS文件中的assets url()替换为第三方域名，以应对特定的webpack构建（angular 2）？
我想以以下方式在我的CSS中使用url()s: .someImage { background: url(/assets/img/some-image.png); } 如果我使用开发构建(config/webpack.dev.js)，我希望它将其翻译成background: url(/assets/img/some-image.png);(默认情况下为它). 但是，如果我使用生产构建(config/webpack.prod.js)，我希望将其翻译成background: url(http://some-3rd-party-domain.com/assets/img/some-image.png); 考虑一下http://some-3rd-party-domain.com，因为它与用角度应用程序的一个完全不同的域. 另一个重要的事情是我不想替换CSS文件中的所有路径.这意味着我要替换url()s仅在匹配特定路径时(在此示例中:/资产/* :). 这
0 2023-12-01
编程技术问答社区
Webpack文件加载器忽略了PNG文件
我正在尝试通过WebPack文件加载程序输出所有图像文件，但是WebPack忽略了带有PNG扩展名的图像.配置在JPG文件上正常工作. 我的webpack配置: const path = require('path'); const PATHS = { src: path.join(__dirname, 'src'), img: path.join(__dirname, 'src/img'), styles: path.join(__dirname, 'src/styles'), build: path.join(__dirname, 'build') } module.exports = { context: PATHS.src, entry: { script: ['./scripts/main.js', './styles/main.scss'], index: './index.htm
0 2023-12-01
编程技术问答社区
Webpack与requirejs/AMD
我正在为仍在使用RequireJS进行模块加载的现有项目的新模块.我正在尝试为我的新模块(例如WebPack)使用新技术(它允许我使用ES6导入使用ES6加载程序).似乎WebPack无法与requirejs语法调和.它会说:"找不到模块:错误:无法解决". 问题:WebPack不会将文件与requirejs/amd语法捆绑在一起. 问题:有什么方法可以使WebPack使用requirejs播放吗? 我的最终输出必须采用AMD格式，以使项目正确加载.谢谢. 解决方案 我也有同样的问题，我设法实现了它.以下是相同的webpack.config.js文件. const fs = require('fs'); const path = require('path'); const webpack = require('webpack'); let basePath = path.join(__dirname, '/'); let config = { //
0 2023-12-01
编程技术问答社区
是否有办法使用html-webpack-plugin来包含部分内容？
我正在使用webpack编译脚本和HTML(使用html-webpack-plugin).问题是，我有5个包含相同零件的HTML文件，我想将这些零件移动到分开.html文件，然后将这些部分include在每个HTML文件中.这样，如果我要更改这些较小的HTML文件，它将重新编译每个HTML文件以表示这些更改. webpack默认情况下为.js文件执行此操作，但是我可以为HTML文件使用类似的内容吗? 解决方案 您可以在模板中使用.示例在这里:其他解决方案 另一个略有不同的解决方案. 使用html-loader与interpolate选项. /a> { test: /\.(html)$/, include: path.join(__dirname, 'src/views'), use: { loader: 'html-loader', options: {
0 2023-12-01
编程技术问答社区
从webpack中导入owl.carousel
我是F2E世界的新手. 我刚刚使用Create-React-app创建了Web应用程序. (我想将owl.carousel导入我的项目中，以便我遵循NPM的指南(> https://www.npmjs.com/package/owl.carousel )，哪个语法是: import $ from 'jquery'; import 'imports?jQuery=jquery!owl.carousel'; 但是调试器控制台指示错误: Unexpected '!' in 'imports?jQuery=jquery!owl.carousel'. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax 我尝试了另一种语法: import owlCarousel from 'owl.carousel' 错误是: Uncaught Ty
0 2023-12-01
编程技术问答社区
通过webpack捆绑暴露javascript的globals
问题 我觉得这应该比现在更简单.我需要从前端访问所有JavaScript库，并且由于将其集成到旧系统中，因此我无法从前端调用require("bundle.js");. 所有内容在捆绑文件的全局范围中必须从前端页面的全局范围访问，通过 tag导入它们. 所以我需要更改旧: $(silly()); // Some function in silly.js's global scope 到新的: $(silly()); // Some function in silly.js's global scope 我尝试过的东西 公开载荷:
0 2023-12-01
编程技术问答社区
如何在Rollup中配置，使多个输入文件只产生一个输出文件？
在配置rolupjs以生成库时，如果输入是由多个JavaScript文件组成的数组.我们该如何仅在一个输出JS文件中生成这些输入? export const lgService = { input: [ './src/app/services/livegiver/lgservices.js', './src/app/services/readable-stream.js' ], output: { file: outputPath + 'LiveGiver/index.js', format: 'es' } } 预期: Input: [a.js, b.js] Output: dist/index.js 实际: Input: [a.js, b.js] Output: dist/a.js; dist/b.js 解决方案 您不能 - 多个输入意味着多个输出.要完成您所描述的事情，您需要拥有一个看起
0 2023-12-01
编程技术问答社区
使用 react-snap 时导航超时
我正在使用React应用程序，并且正在尝试使用React-Snap重新渲染本地的所有内容，但是它似乎正在计时，我已将其附加在下面的图像中以供参考. 注意:我的应用程序具有大约5个带有firebase连接性的ReactC路由以获取数据. 解决方案 将React-Snap版本降级至1.10.0为我修复.
0 2023-11-30
编程技术问答社区
如何动态地给出所有"网格 - 模板行"相同的高度?
这是grid-template-rows.如您所见，最后一行的高度更高.每当一排的高度都比他人高时，我想使行的所有高度相同. 这必须与display: grid;属性. 解决方案 只需将grid-auto-rows设置为1fr，如下所示: 有关 mdn mdn .container { display: grid; grid-auto-rows: 1fr; /* make all rows the same height */ grid-template-columns: 1fr 1fr; gap: 0.5rem; } .container > div { border: 1px solid gray; padding: 0.5rem; } A B C D E E E
0 2023-11-30
编程技术问答社区
在 react 路由器组件中本地监听按键/按下事件
我想在本地React-Routon组件中收听键盘事件 如果按下某个键，它将运行一个函数. 但是，因为我在不同的页面上添加了事件侦听器，因此 它仍将尝试运行该功能，从而导致错误，因为该函数是我的组件的本地. 例如，如果我在登录页面(domain.com/login)中，则登录页面组件加载，并且保持恒定. 因此，我想在我的登录组件中运行一个函数，当该人按Enter时，它将按下登录按钮/aka运行登录函数，该登录函数在按下按钮时称为. 解决方案 当组件Unmounts 时，返回关键字将运行 useEffect(() => { function onKeyDown(e) { if (e.key === "Enter") { console.log("ENTER PRESSED") submit() } } document.addEven
0 2023-11-30
编程技术问答社区
用另一种数字语言显示折线图的纵轴
我试图将垂直轴标记在印度١،٢،٣上，并在印度绘制，但是它似乎对计算机没有意义，因为没有针对阿拉伯语的本地编码，但是就英语0,1而言， 2,3 ...您可以做任何问题，因为我必须出现印度阿拉伯价值的问题 此行图由Google Visualization API，最后一个版本46.0完成，lang为AR，但是结果并不像我的目标 解决方案 (这是对stackoverflow.com/questions/46423807发布的重复问题的一个稍微修改的答案.MartijnPieters，如果您要注意，请删除该问题，而不是删除这个问题.) ) 有一个解决方案，但是您必须使用无证件功能，该功能将在某个时候进行记录.在绘制图表之前，您需要在某个时候打电话. google.visualization.NumberFormat.useNativeCharactersIfAvailable(true); 这与V46之前的材料图一起使用，也可以在经典图表中以V46开头.请参阅此
0 2023-11-30
编程技术问答社区
为什么在React Fibre中componentWillMount可能被多次调用？
我现在在多个来源上阅读了react fiber(async渲染)componentWillMount()可以多次称为 . 为什么会发生这种情况? 解决方案 光纤旨在支持的一件事是高优先级与低优先级更新.例如，动画是高优先级更新(因为很容易注意到60fps动画中的jankiness)，而API调用的更改将是较低的优先级(谁会在您必须等待的东西上注意到额外的一百毫秒无论如何第二?). 因此，一个简单的示例只有标准的一个呼叫componentWillmount的呼叫如下:我们进行较低的优先级更新，而和解开始通过组件树进行操作，在它们上调用componentwillmount，以及进行其他和解.工作.准时运行后，它停下来让事件循环恢复.没有很高的优先级内容，因此在下一个空闲回调中，它可以接收到它停止的地方，完成对帐并提交更新.没有额外的组成符号. 下一个示例:低优先级更新开始，就像对和解者在树上调用componentwillmount一样.和以前一样，它暂停了执行，但是这
0 2023-11-30
编程技术问答社区
移动元素在网格系统之外
我正在使用Bootstrap开发一个Tumblr主题，我希望在标题旁边的用户个人资料图片中一个不错的区域.这里的问题是，Bootstrap具有非常紧密的网格格式，我看不到任何想要的空间: 看到那个红色的东西吗?我想在蓝色箭头指向的地方移动它.我已经尝试扩展容器，将红色圆圈设置为向左浮动，并给出边缘底部:100％，但这使所有内容都从页面上推下来. 这是我的CSS和HTML供参考 css //Media Queries @media (min-width: 1200px){ .container { width: 800px; } } @media (min-width: 992px){ .container { width: 800px; } } //Header Edits .jumbotron{ margin-bottom: 0px; h1{ color: red;
0 2023-11-30
编程技术问答社区
如何将刷卡器中的分页子弹改为文本？
在我的项目中: http://moransh4.github.io/luca/ 我需要在最后一部分将swiper-pagination-bullet更改为: "主动"更改为绿色. 我读(摘自: http://idangero.us.us/swiper/api/api/)我可以对此进行自定义: paginationBulletRender: function (index, className) { return '' + (index + 1) + ''; } 对不起，我迷路了， 如何做? 解决方案 您应该使用paginationCustomRender创建自定义设计. var mySwiper2 = new Swiper('.swiper-container.shoes', { // Optional parameters
2 2023-11-30
编程技术问答社区
当数据库发生变化时，在前端进行实时更新
当数据库记录更新或更改 时，如何更新前端UI 示例 推特 Twitter帖子动态增加了，不喜欢 我们将在这种实时更新中使用什么技术? 的方式是什么 另一个示例firebase 当firebase记录中的某些东西更新 自动前端UI更新 请有人可以帮助我破解这个 解决方案 有许多解决方案将数据从服务器推向(Web)客户端. Firebase的一些示例: Firebase的实时数据库SDK使用Web插座来维护客户端和服务器之间的连接. 当您使用其REST API访问Firebase实时数据库时，您可以使用服务器范围事件(SSE)来完成流媒体更新. Cloud Firestore使用HTTP/2上的长胶合请求.这种连接有很多解决方案. 更多阅读: 是否有一些方法来将数据从Web服务器推到浏览器? html html将数据从服务器推送到没有客户的更新，投票(没有答案，但这个问题包含一些相关链接) 如何如何从Nodejs Server推出实时数据
0 2023-11-30
编程技术问答社区
我怎样才能在没有服务器的情况下发送电子邮件？只有前端的Javascript与sendgrid或
我最近想知道如何仅通过电子邮件将电子邮件作为sendgrid或mandrill之类的服务应用程序发送电子邮件. . sendgrid和mandrill具有卷曲API，因此我基本上可以向他们的API进行AJAX邮政请求发送邮件，但事实是，我必须将我的API Secret Key放入JS文件中，这意味着它将公开...虽然应该是秘密的. 在这两个应用程序上，文档中没有关于前端使用的内容，除了拥有自己的服务器使用API​​，但我目前正在基于前端的项目中.没有服务器编程，服务器仅呈现全部资产. 你们知道这种方法或应用程序可以实现这一目标吗?谢谢 解决方案 您可以使用Formspree.只需提供表单操作中的URL即可. https://formspree.io/ 其他解决方案 几个Sugestions dropbox表单通过jotbox包含 第三方服务，例如使用额外的JavaScript使用不太安全的PHP表单掩盖电子邮件地址，请参阅此线程包括Dave
0 2023-11-30
编程技术问答社区
我正在尝试运行laravel应用程序，但我遇到了这个错误
我的composer.json文件 { "name": "laravel/laravel", "description": "The Laravel Framework.", "keywords": ["framework", "laravel"], "license": "MIT", "type": "project", "require": { "php": "^7.3||^8.0", "brian2694/laravel-toastr": "^5.5", "fideloper/proxy": "^4.0", "intervention/image": "^2.4", "laravel/framework": "5.6.*", "laravel/tinker": "^1.0", "ext-gd": "*" },
0 2023-11-30
编程技术问答社区
指定生成器名称（例如，nx generate @nrwl/workspace:library）-Angular
我正在学习Web Develoment.在Angular中，我正在尝试生成一个新组件，但是写ng generate component homeimgs> 后有一个错误Specify the generator name (e.g., nx generate @nrwl/workspace:library) 如何解决此错误? 解决方案 如果您是USIGN NX，请尝试在CLI中使用此命令: nx g @nrwl/angular:component *componentName* --project=*projectName*
0 2023-11-30
编程技术问答社区
热门专题
解决input为file类型的文本显隐 vue yii2 获取当前域名 华为手机不支持该设备如何处理 hive3.1.2开启web界面 创建spring管理得对象 lua socket.http 有什么用 DevExpress 证书剩余天数 layer.js报错undefined jq Linux文件系统使用优化 不存在 ScriptManager spring session 取不到数据 golang 获取磁盘类型 c#读取access库表中整列最大的数值 把sqlserver表结构导出xml Qt 继承qwidget qss设置背景图片不显示 mybatis查询有些字段有数据但为null sql server 一段范围 数 java 反射 import报错 golang zap 自定义 日志分割 分级别保存 崩溃大陆CE属性修改