在浏览器中按RxJS 6推荐方式导入模块报错，如何解决？

我之前也碰到过一模一样的问题，jspm.io的dev服务在处理RxJS 6这类包的子模块时，确实会出现命名导出无法识别的情况。要让浏览器里的导入写法和打包工具里完全一致，同时保留按需导入的体积优化，你可以试试下面的方案：

首选方案：使用esm.sh CDN #

esm.sh专门针对浏览器ES模块做了优化，能准确解析npm包的导出结构，完美支持RxJS官方推荐的命名导入写法。直接替换你的导入地址即可：

import { Observable, Subject, ReplaySubject, from, of, range } from 'https://esm.sh/rxjs@6';
import { map, filter, switchMap } from 'https://esm.sh/rxjs@6/operators';

这样写就和你在Webpack/Rollup里的代码完全一样，浏览器能正确识别命名导出，同时也不会导入整个模块，保留了RxJS的体积优化。

备选方案：调整jspm.io的导入路径 #

如果你一定要用jspm.io，可以尝试指定operators模块的具体入口文件，避免CDN的自动解析出错：

import { map, filter, switchMap } from 'https://jspm.io/rxjs@6/operators/index.js';

不过这个方案需要你手动确认包的入口文件路径，通用性不如esm.sh，所以更推荐前者。

必要前提 #

别忘了给你的script标签加上type="module"属性，这是浏览器启用ES模块解析的关键：

<script type="module" src="./your-app-script.js"></script>

这个思路同样适用于其他npm包，只要用支持正确解析ES模块的CDN，就能保证开发环境和打包环境的代码写法一致，不用再做额外适配。

内容的提问来源于stack exchange，提问作者nicholas