js import 语法问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 1786 天前的主题，其中的信息可能已经有所发展或是发生改变。

不是前端，且 js 发展好快，完全不懂了
http://es6.ruanyifeng.com/
- import {a} from './xxx.js'
- 大概理解就是从这个./xxx.js文件引入a
https://element.eleme.io/
- import { Notification } from 'element-ui'
- 这种啥意思？是有中间件来转换这个element-ui的吗？

第 1 条附言 · 2020-01-17 15:47:20 +08:00

学习了一下，应该是这样:

browser-compatible

Browser

<script src="https://moment.github.io/luxon/global/luxon.js"></script>
<script>
    alert(typeof luxon.DateTime);
</script>

ESM (ECMAScript Module)

<script type="module">
    import { DateTime } from "https://moment.github.io/luxon/es6/luxon.js";
    alert(typeof DateTime);
</script>
<!-- Relative references must start with either "/", "./", or "../". -->
<script type="module">
    import { DateTime } from "./es6/luxon.js";
    alert(typeof DateTime);
</script>

其它构建/打包工具，根据各自文档来

23 条回复 • 2020-01-07 18:19:40 +08:00

randyo

2020-01-03 23:42:27 +08:00 via Android

就是从 element-ui 里面引入 Notification 啊，还能有啥意思

lxk11153

2020-01-03 23:46:31 +08:00

@randyo #1 './xxx.js' `.js`好理解就是从文件，可是'element-ui'我就不知道怎么理解了？是约定还是什么？'element-ui'指向某文件？？？

Biwood

2020-01-03 23:47:27 +08:00

是的，下面那种写法是基于这些工具：webpack、babeljs 以及 element-ui 教程里提到的 babel-plugin-component

Biwood

2020-01-03 23:49:09 +08:00

再补充一个大前提，该项目是用一个叫 npm 的东西来安装 element-ui 的，上面提到的工具都需要通过 npm 安装

dengshen

2020-01-03 23:49:41 +08:00 via iPhone

一个文件可以导出多个变量 /函数。
import 大括号中导出某一个变量 /函数。

Hario

2020-01-03 23:55:28 +08:00 via Android

element-ui 是个组件库吧，用的话要用 npm 安装，然后按需导入组件。说错勿怪。

randyo

2020-01-04 00:02:00 +08:00 via Android

@lxk11153 现在都是要使用 npm 安装依赖，然后通过 webpack 之类的工具打包，这些工具打包的时候会去 npm 安装的依赖下面（最近的是项目根目录下的 node_modules 文件夹下面）找到这个模块，把代码拉出来打包

Shook

2020-01-04 00:14:49 +08:00

xxx.js 里面可以 export 数个具名的玩意儿：
export function a = function (param) { ... };
expor function b = function () { ... };

所以你可以在外部这样引用：
import { a } from 'xxx.js'
a(param); // 成功了
b(); // 失败了，因为不存在这个方法

import xxx from 'element-ui'就是从 node_modules 找这个模块的入口文件，从中引入玩意儿。

wangyzj

2020-01-04 00:17:25 +08:00

默认本路面 node_modules/下面的 element-ui 文件夹下
再看 package.json 的配置对应 element-ui.common.js 由 src/index.js 编译
export default 里面有 Notification 模块

gbin

2020-01-04 00:18:21 +08:00

这是前端的模块化。element-ui 是一个模块（或者也叫一个包），模块中有个 `package.json` 文件，里面定义了这个模块的入口文件(index.js 或者是其他)。这里的 import { Notification } from 'element-ui' 相当于从入口文件中引入 Notification 对象，即 import { Notification } from 'index.js'。
当然模块的入口文件可能会经过 webpack 等工具构建生成。

ipwx

2020-01-04 00:23:06 +08:00

不懂就去学啊。问这些基础问题有个屁用

gbin

2020-01-04 00:24:15 +08:00

#9 基于楼上的回答，参考
- 这里定义包的入口文件是 https://github.com/ElemeFE/element/blob/6ec5f8e900ff698cf30e9479d692784af836a108/package.json#L5
- 这里配置了入口文件是有 src/index.js 构建生成的 https://github.com/ElemeFE/element/blob/2604c6192f7ec1d8360b4a5c0fc2f447e2df24c1/build/webpack.common.js#L10-L15
- 入口文件导入了引入的对象 https://github.com/ElemeFE/element/blob/6ec5f8e900ff698cf30e9479d692784af836a108/src/index.js#L248

onfuns

2020-01-04 01:00:18 +08:00 via Android

不带相对路径就是默认项目 node_modules 里找，这种是省略写法，其实就是 /node_modules/element-ui/index.js ，这样好理解了吧

marcong95

2020-01-04 01:45:20 +08:00

你自己贴的阮一峰的文章里面也有讲到这个从模块而非某个路径 import 的语法，见：

http://es6.ruanyifeng.com/#docs/module#import-命令

import 后面的 from 指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js 后缀可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。

import {myMethod} from 'util';

而所谓的配置文件可能就要看你的项目本身了，如果你用了 webpack 的话，那详见 webpack 文档：

https://webpack.js.org/concepts/module-resolution/#module-paths

默认值为 node_modules

sneezry

2020-01-04 06:32:48 +08:00

不严谨地（直觉上）说，import ... from 后面接的东西如果是点开头的，也就是相对路径，引入的就是你自己的文件，如果不是点开头的，就是从外部（可能是通过包管理安装的别人写库）引入的文件。那个 element-ui 就是这个模块： https://www.npmjs.com/package/element-ui

非常严谨地（但不直观）说，开头有点的，按照相对路径找，开头没点的到 node_modules 文件夹里面找

jinliming2

2020-01-04 08:03:25 +08:00 via iPhone

@sneezry 小杠一下举个例外：import xxx from 'https://xxxxx'

zhw2590582

2020-01-04 09:16:16 +08:00 via iPhone

我想这个很好理解啊，看下文档就知道规则了，这还要问！。

ZztGqk

2020-01-04 11:21:40 +08:00 via iPhone

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

sneezry

2020-01-04 13:20:22 +08:00 via iPhone

@jinliming2 哈，这种写法我第一次见，长见识了，这个和 go 它俩谁抄的谁啊😂

nanyang24

2020-01-04 17:02:57 +08:00

看评论前 5 条也没有解答 LZ 的问题
如今在网上求解可太难了，还要冒着被喷的危险

lxk11153

2020-01-05 05:30:32 +08:00

@nanyang24 #20 三楼是我想要的答案。
1. 因为我只会写"browser-compatible JavaScript"，没用过其它 JavaScript compiler，所以就不懂那些高级的语法了
2. 也非常感谢其他人的回答。包括已经具体到如何一步步找到最终的引入文件，不过有一丢丢文不对题，还没到那些 js compiler 的使用上呢

cirzear

2020-01-05 13:20:11 +08:00

就是从 element-ui 的组件库中只引入自己需要的组件

Sapp

2020-01-07 18:19:40 +08:00

@nanyang24 可我寻思前五条不都是在解答问题么？而且你前面不就 11、17 楼在“喷”么？如今网上解答个问题可太难了，一不小心还要被嘲讽