es6-modules 相关问题

我想制作一个Javascript文件如果可以导出（例如，它已加载），则导出其内容（例如，类）否则，分配其内容...</desc> <question vote="11"> <p>我想制作一个 Javascript 文件</p> <ul> <li><pre><code>export</code></pre>是它的内容（例如一个类），如果它可以<pre><code>export</code></pre>（例如它已经加载了<pre><code><script type="module"></code></pre>）</li> <li>否则，将其内容分配给全局变量，例如 <pre><code>window</code></pre> 和 <pre><code>global</code></pre>。</li> </ul> <hr/> <p>例如，假设有这样一个文件<pre><code>print.js</code></pre>。</p> <h3>案例A</h3> <p>可以像这样使用它：</p> <pre><code><script type="module"> import print_things from "./print.js"; print_things("Javascript innovation"); </script> </code></pre> <h3>案例B</h3> <p>或者，</p> <pre><code><script src="./print.js"></script> <script> print_things("Hmmmmmmm."); </script> </code></pre> <hr/> <p>目前，使用 <pre><code>export</code></pre> 会使脚本在 <strong>Case B</strong>：<pre><code>Uncaught SyntaxError: Unexpected token export</code></pre> 中抛出错误。因此，它必须知道 <pre><code>export</code></pre> 在其运行的环境中是否可用，以便支持这两个用例。我该怎么做？</p> </question> <answer tick="false" vote="4"> <p>（<strong>注意：您可能不应该在现实世界中使用它</strong>，但它<em>是</em>完全有效并且完全符合您的要求。）<br/> 这是您的 <pre><code>print.js</code></pre> 的实现：</p> <pre><code>function print_things(msg) { console.log(msg) } if(0)typeof await/2//2; export default print_things </code></pre> <p></p><div data-babel="false" data-lang="js" data-hide="true" data-console="true"> <div> <pre><code><script type=module> // (renamed to avoid name collision) import print_things2 from "https://12Me21.github.io/external/print.js" print_things2("Javascript innovation") </script> <script src="https://12Me21.github.io/external/print.js"></script> <script> print_things("Hmmmmmmm.") </script></code></pre> </div> </div> 此语法将从非模块脚本中“隐藏”导出语句，因为 <strong><pre><code>await/2//2; ...</code></pre></strong> 根据上下文进行不同的解析：<p></p> <ul> <li>在<em>模块</em>或<em>异步函数</em>中：<br/> <pre><code>await</code></pre>（运算符） <pre><code>/2/</code></pre>（正则表达式） <pre><code>/</code></pre>（除法） <pre><code>2</code></pre>（数字）</li> <li>在正常的<em>脚本中</em>：<br/> <pre><code>await</code></pre>（变量） <pre><code>/</code></pre>（除法） <pre><code>2</code></pre>（数字） <pre><code>//2 ... </code></pre>（<strong>评论</strong>）</li> </ul> <p>当它被解析为注释时，该行的其余部分将被忽略。因此，<pre><code>export</code></pre>语句仅对模块脚本可见。</p> <p>以下是规范的相关部分： <a href="https://tc39.es/ecma262/multipage/ecmascript-language-functions-and-classes.html#prod-AwaitExpression" rel="nofollow noreferrer">15.8 异步函数定义 > 语法 > AwaitExpression > 注意 1</a></p> <h3>兼容性</h3> <p>作为非模块脚本，它应该可以在<em>任何</em>浏览器（甚至是旧版本的 Internet Explorer 等）中工作，并且在启用<pre><code>"use strict"</code></pre>时仍然有效</p> <p>但是，将其作为模块加载需要支持“顶级等待”，这是在模块本身几年后添加的（〜2021年与〜2018年），所以请记住这一点。<br/> （它也适用于 Nodejs，无论哪种模式）</p> <p>我在自己编写的库中使用了这个技巧，并且它在多个环境中运行良好几个月。然而，它给外部工具（框架、编译器、压缩器等）带来了一些问题</p> </answer> <answer tick="false" vote="2"> <p>理解 <pre><code>type=module</code></pre> 的浏览器应该忽略带有 <pre><code>nomodule</code></pre> 属性的脚本。这意味着您可以为支持模块的浏览器提供模块树，同时为其他浏览器提供回退。</p> <pre><code><script type="module" src="module.js"></script> <script nomodule src="fallback.js"></script> </code></pre> </answer> <answer tick="false" vote="1"> <p>查看<a href="https://github.com/umdjs/umd" rel="nofollow noreferrer">UMD</a>（通用模块定义）。即，<a href="https://github.com/umdjs/umd/blob/master/templates/commonjsStrictGlobal.js" rel="nofollow noreferrer">这个例子</a></p> <pre><code>(function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['exports', 'b'], function (exports, b) { factory((root.commonJsStrictGlobal = exports), b); }); } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') { // CommonJS factory(exports, require('b')); } else { // Browser globals factory((root.commonJsStrictGlobal = {}), root.b); } }(typeof self !== 'undefined' ? self : this, function (exports, b) { // Use b in some fashion. // attach properties to the exports object to define // the exported module properties. exports.action = function () {}; })); </code></pre> </answer> <answer tick="false" vote="0"> <p>就像其他答案的一个小附录。脚本的模块模式可以通过以下方式轻松识别：</p> <pre><code>const isModule = (document.currentScript == null); </code></pre> <p>至少在脚本的主要部分中执行，即不在事件处理程序或回调中执行。请参阅 MDN 上的<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/currentScript" rel="nofollow noreferrer">此处</a> 然而，这个答案并没有解决OP的条件导出的实际意图，因为使用上面的布尔值然后有条件地导出变量会抛出“语法错误：导出声明可能只出现在模块的顶层”或类似的错误。因此，其他答案是要走的路。可能仍然存在上述识别有用的用例。</p> </answer> </body></html>

javascript es6-modules

回答 0 投票 0

Node 和 esm - "type":"module" 破坏了我的脚本

我编写了一个打字稿函数来在 postgres 中插入一些行，我用 tsx 和一个包脚本开始它，如下所示......“install”：“env-cmd tsx Installation.ts”.. ..

node.js es6-modules

回答 1 投票 0

模块导入导出问题

我正在尝试导出一个模块，在另一个模块中扩展和导出它，然后将其导入回原始模块中以便使用它，如下所示： // 基类.js 导出类基类{} 重要...

javascript es6-modules

回答 1 投票 0

为什么Vite开发模式可以解析模块但不能解析构建的产品？

我正在使用 Vite 开发 Fastify 应用程序。我的产品使用 jsonwebtoken 包来签名和验证 JWT。在开发时，我可以通过Vite的开发模式使用所有jsonwebtoken功能。嗬...