使用Parcel-Bundler时无法导入Axios，报import语句无法在模块外使用错误

报错原因 #

这个报错的核心是浏览器默认将.js文件识别为普通脚本，不支持ES6的import模块化语法，结合你的项目配置，有以下几种常见的解决路径：

解决步骤 #

路径1：优先使用Parcel内置开发服务器（推荐，适合新手） #

你使用的Parcel打包工具本身已经内置了开发服务器、自动编译模块化语法、热更新等能力，不需要额外启动browser-sync，操作步骤如下：

• 打开项目根目录的package.json文件，在scripts配置项中新增两条命令：

{
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  }
}

注意把上面的index.html替换成你实际的项目入口HTML文件路径

• 之后直接在终端运行npm run dev即可，Parcel会自动处理你代码里的import语法，启动的本地服务可以直接正常运行，不需要额外配置。

路径2：坚持使用browser-sync的处理方案 #

如果一定要用browser-sync启动服务，有两种可选方案：

• 方案A：让browser-sync访问Parcel编译后的产物目录。先运行npm run build生成编译后的dist文件夹，再启动browser-sync指向dist目录即可，编译后的代码已经把import语法转换为浏览器兼容的格式。
• 方案B：直接访问源码的话，需要修改入口HTML中引入app.js的标签，添加type="module"属性，告知浏览器该文件是ES模块：

<script type="module" src="app.js"></script>
注意：这种方案下直接打开本地HTML文件会有跨域限制，必须通过http服务访问

代码额外修正 #

你当前的代码里请求地址拼接错误，会导致后续请求404：
把原代码中的
await axios.get(https://api.github.com/users${username})
修改为
await axios.get(https://api.github.com/users/${username})
新增路径分隔符/，才能正确拼接出目标用户的GitHub API请求地址。

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