小编HMR*_*HMR的帖子

如何使用 webpack 开发服务器在 webpack 配置中设置 browserslist

我正在尝试在 webpack 配置文件中设置 browserslist 但不知道如何执行此操作。

在 webpack.config 中尝试了以下内容:

'use strict';

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        include: paths.appSrc,
        use: [
            {
                loader: 'babel-loader',
                query: {
                    presets: [ '@babel/preset-env','@babel/react' ],
                }
            },
        ],
      },
    ],
  }
};
Run Code Online (Sandbox Code Playgroud)

在入口文件中添加polyfil:

import '@babel/polyfill';
Run Code Online (Sandbox Code Playgroud)

在.browserslistrc中

ie 11
Run Code Online (Sandbox Code Playgroud)

在 IE 11 中打开该网站并收到错误,因为const someFunction = (fn, offset) =>是语法错误。

webpack 配置由开发服务器使用,因为如果我其中有一些无效值,开发服务器将无法构建。

webpack babeljs webpack-dev-server

8
推荐指数
1
解决办法
1万
查看次数

获取git repo中文件的最后修改数据

我试图找到命令以获取本地git存储库中文件的最后修改日期。

创建了仓库,并完成了一次提交。不得不编辑一个文件并将提交此文件,但想知道存储库中文件的最后修改数据是什么(不是提交日期)。

没有gui onl命令行。

git log ./path/to/filename.php
Run Code Online (Sandbox Code Playgroud)

只给我提交日期

git command-line

7
推荐指数
4
解决办法
3031
查看次数

Docker容器,如何使用主机代理

因为我在中国,几乎不可能在没有 VPN 的情况下使用 Docker Hub、Git、GitHub、npm 和大量其他工具。

终于找到了如何让Docker daemon使用代理(主机上VPN客户端软件中的share VPN就是代理服务器)。

但是一旦我运行容器,我就会再次位于防火墙后面,并且容器没有使用主机代理。这将使从 GitHub 获取任何东西、使用 npm、Bower 和许多其他东西变得不可能。

如何强制容器使用主机代理?

proxy docker

7
推荐指数
2
解决办法
9842
查看次数

下一个 js Router.push 重新加载页面

当我Router.push重新加载页面时,我希望使用 pushState。

在组件中使用以下代码:

import Router from "next/router";
//other code
const search = useCallback(
  e => {
    e.preventDefault();
    Router.push(
      `/products-search/${encodeURIComponent(
        searchText
      )}`,
      `/products-search?q=${encodeURIComponent(
        searchText
      )}`
    );
  },
  [searchText]
);
//other code
<form onSubmit={search}>
  <input
    type="text"
    onChange={change}
    value={searchText}
    pattern=".{3,}"
    title="3 characters minimum"
    required
  />
  <button type="submit">OK</button>
</form>
Run Code Online (Sandbox Code Playgroud)

我的页面/products-search.js

ProductsSearch.getInitialProps = ({ query, store }) => {
  //added try catch as next js may reload if there is an error
  //  running this on the client side
  try {
    const queryWithPage …
Run Code Online (Sandbox Code Playgroud)

reactjs next.js

7
推荐指数
2
解决办法
9524
查看次数

system.js es6模块无法启动

根据入门我创建了一个名为main.js的文件:

 export class q {
    constructor() {
      this.es6 = 'yay';
    }
  }
Run Code Online (Sandbox Code Playgroud)

在我的html文件中得到:

<script src="system.js"></script>
<script>
  SystemJS.import('main.js')
  .then(null,(err)=>console.error(err))
</script>
Run Code Online (Sandbox Code Playgroud)

加载页面时,我得到:

错误:无法动态转换ES模块需要通过配置加载程序插件SystemJS.config({ transpiler: 'transpiler-module' }).实例化http:// localhost:8080/main.js 在system.js上的transpile(system.js:3650)加载main.js:3433 SystemJS.import.then @ index.html:17

我从这里得到的system.js文件:https://raw.githubusercontent.com/systemjs/systemjs/master/dist/system.src.js

使用Chrome中安装的缓存杀手插件从http-server(节点)运行静态内容.

不知道这是什么,但我会继续阅读文档,也许找到解决方案.虽然有点邋in它在"开始"时打破.

更新

我猜这与它有关:

https://github.com/jspm/jspm-cli/issues/1312

但是没有任何关于如何使错误消失的信息.代码在Chrome中运行,并且将由babel进行转换,只有部分我需要system.js用于开发期间加载模块.

更新

https://youtu.be/5P04OK6KlXA?t=3m3s

看起来像"入门"应该提到,为了工作的例子,也需要跟踪.

经过一番搜索,我在这里找到了traceur.js:http://google.github.io/traceur-compiler/bin/traceur.js

将html更改为:

<script src="traceur.js"></script>
<script src="system.js"></script>
<script>
  SystemJS.import('./main.js')
  .then(null,(err)=>console.error(err))
</script>
Run Code Online (Sandbox Code Playgroud)

它仍然是同样的错误.

更新

使用npm安装systemjs和traceur并将它们添加到html:

<script src="./node_modules/traceur/bin/traceur.js"></script>
<script src="./node_modules/systemjs/dist/system.js"></script>
Run Code Online (Sandbox Code Playgroud)

同样的错误.我已经完成了这个并恢复到requirejs用于开发,r.js用uglify进行分发.

在阅读了有关汇总的内容以及编译后的代码如何只导入您需要的内容而不是整个文件时,我们正在研究这个问题.

javascript systemjs es6-modules

6
推荐指数
0
解决办法
1294
查看次数

将变量传递给 React useCallback 钩子

我在学习 React hooks 时遇到了困难。

我正在关注这个网站,https://reactjs.org/docs/hooks-reference.html

const onGameOver = React.useCallback(
  ({ playerScore, playerHealth, gameId }) => {
    setPages(player =>
      arrayMove(playerScore, playerHealth, gameId)
    );
    console.log('gameId: ', gameId);
  },
  [player, gameId]
);
Run Code Online (Sandbox Code Playgroud)

我可以看到playerScore 和playerHealth,但看不到gameId。

我将“gameId”放入依赖项数组中,但在 console.log 中它始终为“未定义”。

出于测试目的,我只是给 gameId 一个虚拟 ID,如下所示:

const gameId = useState(123);
Run Code Online (Sandbox Code Playgroud)

但最终,我会这样使用它:

<GameOverScreen controlId={ControlId} stats={endGameStats} onGameOver=({onGameOver, gameId}) />
Run Code Online (Sandbox Code Playgroud)

我可能做错了什么?

谢谢

reactjs react-hooks

6
推荐指数
1
解决办法
2万
查看次数

模拟 useSelector 具有不同的值

我正在尝试这样的事情:

const useSelector = jest.fn();
jest.mock('react-redux', () => ({
  useSelector,
}));
Run Code Online (Sandbox Code Playgroud)

然后尝试做这样的事情:

useSelector.mockReturnValueOnce({});
shallow(
  <ComponentUsingUseSelector />
);
Run Code Online (Sandbox Code Playgroud)

这会给我一个错误:

的模块工厂jest.mock()不允许引用任何超出范围的变量。

因此,如果我不能使用超出范围的变量进行模拟,那么我将如何为每个测试返回不同的值?

javascript reactjs jestjs

6
推荐指数
2
解决办法
2万
查看次数

为什么不卷曲在PHP中发送我的标题?

以下代码:

$ch = curl_init('http://localhost/testweb/search.php');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($ch, CURLINFO_HEADER_OUT, true);
curl_setopt($ch, CURLOPT_HEADER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
        'Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
        'Accept-Encoding    gzip, deflate',
        'Accept-Language    en-US,en;q=0.5',
        'Connection keep-alive',
        'SomeBull   BeingIgnored',
        'Cookie CLASSICPAGE=off',
        'User-Agent Mozilla/5.0 (Windows NT 5.1; rv:16.0) Gecko/20100101 Firefox/16.0'
        ));
$response = curl_exec($ch);
$info = curl_getinfo($ch);
curl_close($ch);
$body = substr($response, -$info['download_content_length']);
echo $body;
Run Code Online (Sandbox Code Playgroud)

有以下输出(php.exe mycurl.php):

Host: localhost
Accept: */*
User-Agent      Mozilla/5.0 (Windows NT 5.1; rv: 16.0) Gecko/20100101 Firefox/16.0
Run Code Online (Sandbox Code Playgroud)

localhost上的search.php:

error_reporting(0);
header("Content-Type: text/plain");
foreach (getallheaders() as $name => $value) {
    echo "$name: $value\n"; …
Run Code Online (Sandbox Code Playgroud)

php curl http-headers

5
推荐指数
1
解决办法
6491
查看次数

在contenteditable ="true"div中锁定元素

我有一个用于用户输入的contenteditable div,当点击一个按钮时,它显示替换某些单词的选项.首先,它剥离所有html并创建可以替换单词的span元素.这些词的标记是不同的,我面临一些问题.

  1. 在跨度之前或之后直接单击并键入文本时,文本将具有与跨度相同的标记.在仅具有跨度的行上添加单词非常困难.我想通过填充跨度来解决这个问题,&nbsp;但它看起来有点奇怪.
  2. 用户可以单击跨度并更改它,我希望用户单击跨度并在更改之前选择替换或忽略选项.换句话说,它需要被锁定.我想通过capturig keyup来做这件事,如果它来自一个跨度然后是e.preventDefault(),但编程它有点痛苦.

所以我的问题是:

是否有一种简单的方法可以将一个span元素锁定在一个contenteditable中,不涉及捕获key和preventDefault(尚未尝试过,甚至不确定它是否可行)?

当单击或直接移动光标旁边的光标并键入文本时,它将成为跨度的一部分,有没有办法让它成为跨度的一部分?填充跨度&nbsp;可能有效,但当跨度是该行的第一个单词时,它看起来很奇怪.为了说明这一点,我在下面发布了一个示例html文件:

<!DOCTYPE html>
<html>
 <head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Example</title>
</head>
 <body>
   <div contenteditable="true"></div>
   <script type="text/javascript">
    document.getElementsByTagName("div")[0]
      .innerHTML="<span style='color:green'>hello</span>"
   </script>
 </body>
</html>
Run Code Online (Sandbox Code Playgroud)

html javascript html5 dom

5
推荐指数
1
解决办法
1518
查看次数

当宿主改变来源grunt/karma没有检测到它时,对流浪者的咕噜业力测试

这花了我很多年才找到,但似乎无法找到这个解决方案.使用vagrant我运行一个运行grunt/karma的Fedora 20来宾.我在主机上编辑的源代码但是当我保存grunt时没有检测到更改,因此没有进行任何测试.

认为这是一个配置问题所以在这里尝试了许多组合而没有成功.最后,我向访客打开了第二个ssh vagrang ssh并更改了另一个ssh终端中的文件echo " " >> app/js/app.js,看到现在grunt/karma检测到更改并再次运行测试.

因为它没有x窗口或任何我用PhantomJS运行测试.另一个问题是我必须EnableSendfile off在httpd.conf中设置以防止Apache在从共享中提供文本文件时发送垃圾(这是我的主机项目和客户机中的web根目录).我的猜测是,可能需要对节点执行另一个设置,以便它检测主机对共享上的文件所做的更改.它使用virtualBox共享.

有没有人经历过这个,有没有解决方案呢?似乎主机更改共享文件不会触发grunt/karma正在侦听的某些事件,表明文件已更改.

[更新]

试过NFS和rsync共享,但NFS根本不工作,rsync似乎只是在启动时同步.

[更新]

作为临时解决方案,我必须手动告诉文件在ssh终端中更新:

#start grunt and give me back command:
grunt &
#when I update a file tell grunt it's updated
touch -d "now" test/unit/loginSpec.js
Run Code Online (Sandbox Code Playgroud)

有趣的是,如果我更新app/js/login.js并告诉grunt test/unit/loginSpec.js更新它将再次运行测试但使用旧的login.js即使已更改cat app/js/login.js显示更改.如果不是这样,解决方案将焦点设置到右侧窗口和2次击键(向上箭头并输入)

linux virtualbox vagrant gruntjs karma-runner

5
推荐指数
1
解决办法
562
查看次数