设想

索引页使用“getInitialProps”加载数据。然后我们创建一个可以创建新数据的对话框。创建新数据后，应重新加载当前页面。

问题

我们Router.replace('/')用来重新加载页面。但它会触发服务器端渲染。

题

我们需要的是客户端重新加载。应该在浏览器中调用“getInitialProps”函数。那么，如何进行客户端重载呢？

我正在使用 AVA + sinon 来构建我的单元测试。由于我需要 ES6 模块并且我不喜欢 babel，因此我在整个项目中使用 mjs 文件，包括测试文件。我使用“--experimental-modules”参数来启动我的项目，并在测试中使用“esm”包。以下是我的ava配置和测试代码。

  "ava": {
    "require": [
      "esm"
    ],
    "babel": false,
    "extensions": [
      "mjs"
    ]
  },


// test.mjs
import test from 'ava';
import sinon from 'sinon';
import { receiver } from '../src/receiver';
import * as factory from '../src/factory';

test('pipeline get called', async t => {
  const stub_factory = sinon.stub(factory, 'backbone_factory');
  t.pass();
});

但我收到错误消息：

  TypeError {
    message: 'ES Modules cannot be stubbed',
  }

如何在没有 babel 的情况下存根 ES6 模块？

环境

• 铬：v113
• 操作系统：Ubuntu 23.04
• 显示器：Nvidia RTX 3060 移动版

错误信息

WebGPU has been disabled via blocklist or the command line.
Disabled Features: webgpu

全文来自 chrome://gpu

Graphics Feature Status
Canvas: Hardware accelerated
Canvas out-of-process rasterization: Disabled
Direct Rendering Display Compositor: Disabled
Compositing: Hardware accelerated
Multiple Raster Threads: Enabled
OpenGL: Enabled
Rasterization: Hardware accelerated
Raw Draw: Disabled
Video Decode: Hardware accelerated
Video Encode: Software only. Hardware acceleration disabled
Vulkan: Enabled
WebGL: Hardware accelerated
WebGL2: Hardware accelerated
WebGPU: Disabled
Driver Bug Workarounds
adjust_src_dst_region_for_blitframebuffer
clear_uniforms_before_first_program_use …

我们经常使用同步启动一个变量。

const x = call_a_sync_function();

但是当发起者变为异步时，就会出现问题。

const x = await call_an_async_function(); // SyntaxError: Unexpected reserved word

我试过匿名异步启动器，它并不完美。

let x;
(async () => x = await call_an_async_function())();
export function func() {
  call(x); // x would be undefined if func() is called too early.
}

然后我尝试在匿名异步启动器中导出该函数，再次失败。

(async () => {
  const x = await call_an_async_function();
  export function func() { // SyntaxError: Unexpected token export
    call(x);
  }
)();

那么，有没有更好的解决方案？

假设我们启动一个 mongodb 查询语句，如下所示：

const user = await db.users.findOne(...);
console.log(user);

结果很好。

{
  _id: 5f60647c28b90939d0e5fb24,
  tenantId: '5e6f7c86e7158b42bf500371',
  username: 'aaaa',
  email: 'xxxx@yy.com',
  createdAt: 2020-09-15T06:51:40.531Z,
  updatedAt: 2020-09-15T06:51:40.531Z,
  __v: 0
}

然后我们使用解构。

const { _id, username, ...others } = user;
console.log(others);

我们得到一个奇怪的东西：

[
  [
    '$__',
    InternalCache {
      strictMode: false,
      selected: [Object],
      shardval: undefined,
      saveError: undefined,
      validationError: undefined,
      adhocPaths: undefined,
      removing: undefined,
      inserting: undefined,
      saving: undefined,
      version: undefined,
      getters: {},
      _id: 5f60647c28b90939d0e5fb24,
      populate: undefined,
      populated: undefined,
      wasPopulated: false,
      scope: undefined,
      activePaths: [StateMachine],
      pathsToScopes: {},
      cachedRequired: {}, …

假设我们要导出大量的名字。

export const fn0 = fn.bind(null, '0');
export const fn1 = fn.bind(null, '1');
...
export const fn999 = fn.bind(null, '999');

是否可以导出如下动态名称？

// array is [0 to 999]
array.forEach(i => export const [`fn${i}`] = fn.bind(null, i.toString());

Next.js 的默认配置兼容 IE11。现在我们只为最新的浏览器（最新版本的 Edge、Safari、Chrome 和 Firefox）编写 Web 应用程序。所以我们希望 babel 做尽可能少的事情。那我怎么写“.babelrc”呢？