使用没有Transpiler/Bundler步骤的ES6模块 [英] Using ES6 Modules without a Transpiler/Bundler step
问题描述
我对使用一堆JS库感兴趣，而不必依赖于基于npm的工具和其他捆绑步骤.
I'm interested in using a bunch of JS libraries without depending on npm-based tooling and additional bundling steps.
在浏览器中支持ES6模块后，我可以使用以下模块:
With ES6 modules support in the browser, i can use modules like this:
<script type="module">
import Vue from 'https://unpkg.com/vue@2.6.0/dist/vue.esm.browser.min.js';
new Vue({...});
</script>
当所需的模块没有任何传递依赖项时，哪一种很好.但是通常，来自转译的ES6之前版本的模块都是这样做的:
Which is fine when the required module doesn't have any transitive dependencies. But usually, those modules from the transpiled pre-ES6 world do it like this:
import Vue from 'vue'
在当今的浏览器中似乎不起作用.我缺少某种将模块说明符与某个URL关联的选项，比如说< script> 标记的属性.
Which doesn't seem to work in todays browsers. I'm missing some kind of option, to associate the module specifier with a certain URL, let's say as an attribute to a <script> tag.
一个务实的解决方案是回到使用UMD构建的模块，这些模块已安装到全局名称空间中，并允许我在主HTML文件中明确列出所有依赖项.
A pragmatic solution would be to just go back to use the UMD builds of modules, which are installed into the global namespace and allows me to explictly list all dependencies in the main HTML file.
但是我对概念故事很感兴趣.捆绑工具告诉我们，将来在获得本机支持时它们会过时，但是到目前为止，浏览器的支持已经毫无用处，因为生态系统可能不会始终如一地转向通过相对路径导入模块.
But I'm interested in the conceptual story. The bundler tools tell it as they will be obsolete in the future when there is native support, but as of now, the browser support is pretty useless, because the ecosystem is probably not consistently going to shift to importing modules by relative paths.
推荐答案
对于ES模块功能，而大多数"浏览器中未使用捆绑器，请尝试 es-module-shims :
For ES module features without the use of a bundler in "most" browsers try es-module-shims:
这会添加当前导入映射规范的 -shim 变体.可以使用基线ES模块支持将其填充到浏览器中.
This adds a -shim variant of the current import map specification. Which can be polyfilled onto browsers with baseline ES module support.
这篇关于使用没有Transpiler/Bundler步骤的ES6模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
