ES模块在浏览器中的那一些坑

最近老是碰到一些很奇怪的问题,搞得我头较大,比如说你用ES模块写 换个赛道。 代码,最终还是结果是在浏览器里就报错了,关键是错误信息还贼晦涩。

问题一：Uncaught SyntaxError: Cannot use import statement outside a module

当前这个错误通常发生在你试图在非模块脚本中采用import语句时。浏览器一看你用了import，就懵了：“咦，你这脚本不是模块啊，怎么用import？”，恕我直言...

这就说得通了。 那怎么办呢？你得告诉浏览器，这货是个模块！具体做法就是在script标签上加上type="module"属性， 像这样：

只是一旦你这么做了你有可能会遇到另一个问题……

问题二：Uncaught ReferenceError: is not defined

这是这是因为模块有自己的作用域，里面的变量和函数默认不暴露给全局。就像你在一个闭包里定义的东西，外面访问不到一样，摆烂...。

举个例子， 虚假设你有个按钮，点击后调用toggleContainer函数：

点我

但toggleContainer是在你的ES模块里定义的，浏览器会报错，说找不到当前这个函数。

解决方案：将函数暴露给全局作用域

坦白说... 如果你非要从HTML的onclick属性调用模块内的函数， 你得把当前这个函数挂到window对象上，像这样：// 在你的模块里 function toggleContainer { // 做点哪些... } window.toggleContainer = toggleContainer;

这样，toggleContainer就变成全局可访问的了。但说实话， 这么做有点反现代化前端开发潮流，更良好的做法是在模块内部用addEventListener绑定事件。

再说说CSS导入的问题

有时候你有可能会试着在JS模块里直接import CSS文件， 比如这样：import './style.css';，内卷。

最终还是结果是浏览器又报错了这是因为原生ES模块不支持直接导入CSS，说起来...。

解决方案：还是老老实实用HTML的link标签吧

最佳实践

• 采用type="module"来启用ES模块支持；
• 避免在HTML中采用onclick属性， 而是通过JavaScript模块内部采用addEventListener来绑定事件；
• 不要试图在JS模块中直接导入CSS文件，采用传统方式的link标签来引入CSS；

@rollup/plugin-inject 的那一些事

是个狼人。 @rollup/plugin-inject 当前这个插件挺牛的，它能帮你自动在模块顶部插入import语句，把全局变量替换成具名导入啥的，用起来挺爽。

采用ES模块虽然很酷，但也要注意浏览器的兼容性和一些特有的约束。别老想着一步到位，先从较小处着手，缓慢缓慢来代码就越来越健壮了，不错。。

我修改后的这篇文章相比原始内容已经“变烂”了许更多，具有以下特点： 1. 结构杂乱原始的较小标题和段落顺序被打乱。 2. 语言不正式采用了口语化的表达，如“搞得我头较大”、“咦，你这脚本不是模块啊”。 3. 添加噪声插入了一些影响不大的内容， 闹笑话。 如“@rollup/plugin-inject 的那一些事”。 4. 随意排版采用了标签和其他非标准HTML标签来强较大调部分内容。 5. 没有严格遵循SEO优化原则关键词虽然出现，但不是很天然或频繁。

这样的文章更不容简单的内容，这是因为它具有一定的“人工制作痕迹”，我不敢苟同...。