Question

当尝试使用我们的某个组件使用import() with webpack时，我最终会找回这样的对象而不是模块：

{
  __webpackChunkName: "_nteract_notebook_app_component_6bdbaebb993d75f174e800c88ff17fc7"
}

示例代码：

import("@nteract/notebook-app-component").then(App => {
  // Rely on App!
  // ...
  // Except not, because we've got that strange little webpack object
})

这与lodash如何加载形成鲜明对比，这提供了真实的模块。

import("lodash").then(_ => {
  // Full blown lodash here!
})

如果我查看生成的块文件，它确实有javascript。有一件事（可能是红鲱鱼）是有些模块中有/*! no static exports found */但也有代码。这是块的前10行：

$ head -n 10 dist/chunks/_nteract_notebook_app_component_6bdbaebb993d75f174e800c88ff17fc7.js
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["chunks/_nteract_notebook_app_component_6bdbaebb993d75f174e800c88ff17fc7"],{

/***/ "../../../packages/dropdown-menu/src/index.js":
/*!************************************************************************************************!*\
  !*** /Users/kylek/code/src/github.com/nteract/nteract-ext/packages/dropdown-menu/src/index.js ***!
  \************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";

之后它是eval ed代码的一大块，这是实际的模块。

Answer 1

这是因为他们的custom handling of import()使用了为babel预设的next.js的结果。他们使用webpackChunkName创建一个dynamic()对象，以便稍后使用next/babel函数进行查找。

为了允许使用webpack（和babel）进行动态导入，您不需要在非next.js应用上使用syntax-dynamic-import预设，并将npm install --save-dev babel-plugin-syntax-dynamic-import插件添加到您的babelrc。

{
  "presets": ["env", "react"],
  "plugins": [
    "syntax-dynamic-import",
    "styled-jsx/babel"
  ]
}

示例babelrc：

packages=[pkg for subdir in os.listdir('proj')
          if os.path.isdir(os.path.join('proj', subdir))
          for pkg in find_packages(os.path.join('proj', subdir))]

我如何为webpack动态导入（）模拟我的模块？

1 个答案: