使用Webpack和Babel的ES6动态导入

Question

我一直在使用Webpack作为我的ES6 JS项目,并且在我开始使用动态导入之前一直很顺利.

我有什么工作(router.js):

import { navigo } from "Navigo"; // router
import { clients } from "Controllers/clients.js";

const navigo = new Navigo();

navigo_router.on({
  '/clients': () => {
    clients.init();
  }
});

但是我添加的页面/路线越多,进口就越多地堆积在模块的头部.这是一个相对较大的应用程序,我有很多页面/路由要添加,因此我需要动态加载它们,以减少初始页面加载的大小.

因此,按照Webpack的动态导入文档,我尝试了以下内容,只有在调用相对路径时才加载控制器模块:

import { navigo } from "Navigo"; // router

const navigo = new Navigo();

navigo_router.on({
  '/clients': () => {
    import("Controllers/clients.js").then((clients) => {
      clients.init();
    });
  }
});

但是在我的编辑器中保存它会导致Babel发生错误; SyntaxError:'import'和'export'可能只出现在顶层,并且clients.init()在浏览器中测试时不会被调用.

经过一番阅读后,我发现我需要一个Babel插件来动态import()转换require.ensure.所以,我使用以下命令安装了插件:

npm install babel-plugin-dynamic-import-webpack --save-dev

并在我的babel.rc文件中声明了插件

{ "plugins": ["dynamic-import-webpack"] }

安装插件后,转换错误消失,检查我的转换代码,我发现动态import()s实际上已经require.ensure按预期更改.但是现在我在测试时遇到以下浏览器错误:

Error: Loading chunk 0 failed.
Stack trace:
u@https://<mydomain.com>/js/app.bundle.js:1:871
SyntaxError: expected expression, got '<' 0.app.bundle.js:1
Error: Loading chunk 0 failed.

我不明白为什么有人引用0.app.bundle.js与0.前缀,所以我检查我的输出/ DIST文件夹,我现在已经在那里被称为一个新的文件0.app.bundle.js:

0.app.bundle.js      1,962bytes
app.bundle.js        110,656bytes

我想这个新的捆绑文件是动态导入的模块clients.js.

我只添加了动态导入到那条路线,并保留了所有其他路线.因此,在测试期间,我可以查看除了/clients现在抛出上述错误的一条路线之外的所有路线.

我完全迷失在这一点上,并希望有人能帮助我超越终点线.什么是这个新文件0.app.bundle.js以及我应该如何在我的应用程序中使用它/包含它？

我希望我已经足够清楚地解释了自己,并期待任何回应.

Answer 1

最后我设法解决了我自己的问题，所以我将在答案中分享我的发现。

块文件没有加载的原因是因为 Webpack 在错误的目录中寻找它。我注意到在我的开发者控制台的 Network 选项卡中，块文件/模块是从我的根目录/而不是/js它所属的目录中调用的。

根据 Webpack 的文档，我在 Webpack 配置文件中添加了以下内容：

output: {
  path: path.resolve(__dirname, 'dist/js'),
  publicPath: "/js/", //<---------------- added this
  filename: 'app.bundle.js'
},

据我了解，path用于 Webpack 的静态模块和publicPath用于动态模块。

这使块加载正确，但我还有其他问题要处理，因为client.init()没有被调用并产生以下错误：

TypeError: e.init is not a function

为了解决这个问题，我还必须改变：

import("Controllers/clients.js").then((clients) => {
  clients.init();
});

到：

import("Controllers/clients.js").then(({clients}) => {
  clients.init();
});

注意箭头函数参数中的花括号。

我希望这对其他人有帮助。