前端JS import语句必须加.js后缀吗？

Question

初学前端 我想使用一个模块 @tensorflow-models/handpose,
我首先 yarn add @tensorflow-models/handpose
之后在index.js引用这个模块，
import * as handpose from '@tensorflow-models/handpose';
报错：

Uncaught TypeError: Failed to resolve module specifier "@tensorflow-models/handpose". Relative references must start with either "/", "./", or "../".

于是我改为
import * as handpose from './node_modules/@tensorflow-models/handpose/dist/index';
这时候报错

net::ERR_ABORTED 404 (Not Found)

改为import * as handpose from './node_modules/@tensorflow-models/handpose/dist/index.js';
不再报找不到这个文件。但是由于模块的index.js也引用了其他的js文件,其他的js文件又有import xx form xx 的句子（没有.js后缀）
难道只能一个个改过去加上.js后缀吗？实在是太多了。

Answer 1

1. 浏览器端 import 语句后面加的是 url，只要这个 url 返回的是 js 模块就可以正常加载。url 不存在后缀之说，当然大部分时候资源在静态服务器上托管，url 末尾通常是资源的文件路径，所以大概率 .js 结尾。
2. nodejs 端 import 语句后面接的是模块标识符，一般是 node module 模块名，也可以是 js 文件的路径。nodejs 模块查找有一套自己的逻辑，其中还涉及 package.json 的概念，有兴趣可以深入了解。
3. 现在的前端项目大概率都会使用构建打包工具，你的import 语句会被构建工具处理，这意味着 import 后面的东西只要是构建工具能理解的就可以，构建工具再把它转化成目标平台(浏览器或者nodejs)能理解的意思。所以你会看到 import 省略后缀的，直接 import 到目录的，面向浏览器项目也能用 import npm 包的，甚至 import 一个非 js 模块比如一张图片，一个 css 文件的。当然他们最终会转化成浏览器能理解的import，也可能直接合并成一个模块import都消失了。

如果你没有用构建工具，参考第一条。