Question

我想以这种方式在HTML页面中使用browserified standalone bundle：

<script>
    window.browserify_standalone.doAwesomeStuff();
</script>

注意：我没有使用任何模块系统，这就是为什么我希望可以从window访问独立模块。我们来调用独立模块browserify_standalone。

我希望这个HTML本身是独立的（没有外部的js源代码），所以我试图在脚本标记中编写生成的bundle的内容，如：

<script><%= browserify_standalone_js_content %></script>
<script>
    window.browserify_standalone; // undefined
</script>

但是无法从我的页面解析window.browserify_standalone！令人惊讶的是，导入原始捆绑文件的“常规方式”有效：

<script src="browserify_standalone.js"></script>
<script>
    window.browserify_standalone; // Is now defined !
</script>

修改

我注意到在粘贴脚本时甚至没有评估模块主文件的内容：我在alert()内部进行了调用，只有在从{加载脚本时才获得实际警报{1}}

哪种机制能够带来这种差异？

Answer 1

我猜您已将脚本放入body标签中。具有src属性的脚本标记在脚本可用时执行，而内联js立即执行。因此，在内联脚本之后评估带有src的脚本标记，同时按照它们的定义顺序评估两个内联脚本。

Answer 2

我终于搞砸了。

内联js和src之间的区别 - 导入的js只是XML。

事实上，如果js中存在类似XML / HTML的内容（即使是在字符串中），内联HTML也会中断，因为<script>标记将停止被解释。我的浏览器模块捆绑了一个XML解析器，解释了这个问题。

尽管如此，我发现了一个看起来不太好看的解决方案但是有效：

将JS文件预处理为内联的代码：

var browserify_standalone_js_content = encodeURIComponent(fs.readFileSync('browserify_standalone.js').toString())
    .replace(/'/g, '\\\'');

然后评估HTML中的转义代码：

<script>
    eval(decodeURIComponent('<%= browserify_standalone_js_content %>'
        .replace(/\\'/g, '\'')))
</script>

诀窍：

我希望这对你们中的一些人有用：）