Question

直到从Webpack切换到早午餐之前，我才真正想到过它，在那里我在index.html中看到以下几行：

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

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

为什么捆绑器需要开发服务器？开发服务器在后台做了什么，以允许浏览器正确地显示带有捆绑软件的页面？渲染功能不是内置在浏览器中吗？

最初，我认为它是在搭建一个节点服务器来帮助翻译诸如require（）之类的命令，但是上面显示该行已通过浏览器。当您只打开html文件而不是通过服务器交付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+"'")}:

Answer 1

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

您正在加载/app.js，它将定义您的require函数。

URL以/开头。

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

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

Answer 2

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

为什么基于Web的前端捆绑程序需要开发服务器

2 个答案: