2

在我从 webpack 切换到 brunch 之前，我从来没有真正考虑过它，我在 index.html 中看到了以下几行：

<script type="text/javascript">
      require('main');
    </script>

当您尝试简单地打开本地 html 页面时（即使在 webpack 中构建了所有内容之后），它也会产生错误（SCRIPT5009: SCRIPT5009: 'require' 未定义）并且无法正确呈现，但是当您通过以下方式打开页面时它正确呈现的开发服务器。

为什么捆绑器需要开发服务器？开发服务器在幕后做了什么以允许浏览器正确呈现带有捆绑包的页面？渲染能力不是内置在浏览器本身吗？

本来我以为是搭个node server来帮助翻译require()之类的命令，但是上面显示的是该行是通过浏览器传递过来的。为什么当您打开 html 文件而不是通过服务器传递时，浏览器会在该命令上阻塞？

附带说明一下，当页面也通过 apache 交付时，一切正常。如果是某种节点翻译，那么 apache 怎么不窒息呢？

编辑：

显示已交付的文件是：

logo.png （只是一个 vue 标志） app.js （捆绑的 javascript 文件） html 文件，它看起来像：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue-webpack-brunch</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/app.js"></script>
    <script type="text/javascript">
      require('main');
    </script>
  </body>
</html>

一切都是这样交付的，这就是项目的范围。如果 javascript 包包含 requirejs，那么如果您也只是在本地打开文件，它也应该可以工作

编辑2：

在控制台中输入 require 会产生以下结果：

(t,r){null==r&&(r="/");var i=l(t);if(o.call(n,i))return n[i].exports;if(o.call(e,i))return u(i,e[i]);throw new Error("Cannot find module '"+t+"' from '"+r+"'")}:
4

2 回答 2

2 
<script src="/app.js"></script>

您正在加载/app.js它将定义您的require功能。

URL 以/.

如果您从网络服务器加载它，则/指的是站点的根目录。

如果您从本地文件系统加载它，那么/指的是文件系统的根目录（如果您是 Windows，则指磁盘）。这将是错误的地方，因为 webpack 不会在那里生成它（你不想c:\app.js为使用 webpack 构建的每个应用程序创建）。

于 2018-07-08T08:25:15.453 回答
0

该require关键字给出错误，因为它是一种要求外部文件的虚构方式。如果您使用import标准本机实现，它可以在较新的浏览器上开箱即用。捆绑器不是必需的。

要求来自https://requirejs.org/

他们正在寻找这个词require，并且本质上是将该源路径中的代码注入到构建文件中。就像我为我的项目制作了一个injectFile关键字一样。InjectFileJS

<script type="text/javascript">
  injectFile('main');
</script>

那会产生同样的错误，injectFile 是未定义的。您需要在您的 Web 服务器上运行我制作的文件加载器来解析和转译文件以使该函数存在。

但是，如果您使用import新浏览器，则无需捆绑器即可摆脱困境：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

于 2018-07-08T08:03:53.600 回答