javascript - ES6 import {} from '..'后缀名的问题
阿神
阿神 2017-06-26 10:52:54
[JavaScript讨论组]

最近在看阮一峰的ES6入门。下图中圈出来的地方不太理解。

文中说到.js后缀不可省略。
但是下文中又出现了如下写法:

// lib.js
export let counter = 3;
export function incCounter() {
  counter++;
}

// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4

这里import { counter, incCounter } from './lib';不是省略了.js后缀名吗。
对比了一些人家写的react代码:

import React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import App from "./containers/App.jsx";
import Store from "./store/Store";

import React from "react";这里也省略了.js后缀,但是import App from "./containers/App.jsx";却又把后缀名完整写出来了。

请教一下各路大神,解答一下疑问:import..from的后面究竟在什么情况下要写.js这类的后缀名,什么时候不需要写。还是因为别人用工具配置了什么东西所以才不需要写后缀名。
万分感谢!!!

阿神
阿神

闭关修行中......

全部回复(2)
ringa_lee

个人见解:

  1. 比如说:react、react-dom、vue等都是贡献者发布的 NPM package(也就是打包好的模块),使用NPM安装后都会存放到node_modules目录下,这些都是上文所提到的module

  2. 而JS文件并不是一个module,(这里说的不完全)

    • 在ES6中提供了模块化,(使用import、export定义模块)

    • 在Node.js中,采用CommonJS规范定义模块

  3. 推荐一篇文章

过去多啦不再A梦
  1. .js不能省略,主要是为了可读,以及区分。假设你目录下有个自己写的模块test,还有一个自己写的js文件test.js。模块是以文件夹形式存在的,然后你用import './test',你无法确定你加载的是模块还是test.js(虽然,在ES6中,一个JS文件也算是一个模块)。

  2. 你看到的这种代码import React from "react",并不是省略了.js,而是直接省略了/index.js。这是一个由npm安装的包,在node_modules文件夹下面,其实它导入的是\node_modules\react\index.js,是整个包的入口文件,然后由index.js再去加载react需要用到的其他子js文件

  3. 注意,在node.js里,暂时还不支持ES6的import语法,所以需要通过require()引入包,用module.exportsexports暴露包中的可引入部分。

详细请看MDN文档

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号