- 不是前端,且 js 发展好快,完全不懂了
- http://es6.ruanyifeng.com/
import {a} from './xxx.js'
- 大概理解就是从这个
./xxx.js
文件引入a
- https://element.eleme.io/
import { Notification } from 'element-ui'
- 这种啥意思?是有中间件来转换这个
element-ui
的吗?
就是从 element-ui 里面引入 Notification 啊,还能有啥意思
'./xxx.js' `.js`好理解就是从文件,可是'element-ui'我就不知道怎么理解了?是约定还是什么?'element-ui'指向某文件???
是的,下面那种写法是基于这些工具:webpack、babeljs 以及 element-ui 教程里提到的 babel-plugin-component
再补充一个大前提,该项目是用一个叫 npm 的东西来安装 element-ui 的,上面提到的工具都需要通过 npm 安装
一个文件可以导出多个变量 /函数。
import 大括号中导出某一个变量 /函数。
element-ui 是个组件库吧,用的话要用 npm 安装,然后按需导入组件。说错勿怪。
现在都是要使用 npm 安装依赖,然后通过 webpack 之类的工具打包,这些工具打包的时候会去 npm 安装的依赖下面(最近的是项目根目录下的 node_modules 文件夹下面)找到这个模块,把代码拉出来打包
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 找这个模块的入口文件,从中引入玩意儿。
默认本路面 node_modules/下面的 element-ui 文件夹下
再看 package.json 的配置对应 element-ui.common.js 由 src/index.js 编译
export default 里面有 Notification 模块
这是前端的模块化。element-ui 是一个模块(或者也叫一个包),模块中有个 `package.json` 文件,里面定义了这个模块的入口文件(index.js 或者是其他)。这里的 import { Notification } from 'element-ui' 相当于从入口文件中引入 Notification 对象,即 import { Notification } from 'index.js'。
当然模块的入口文件可能会经过 webpack 等工具构建生成。
不懂就去学啊。问这些基础问题有个屁用
基于楼上的回答,参考
- 这里定义包的入口文件是 https://github.com/ElemeFE/element/blob/6ec5f8e900ff698cf30e9479d692784af836a108/package.json/>- 这里配置了入口文件是有 src/index.js 构建生成的 https://github.com/ElemeFE/element/blob/2604c6192f7ec1d8360b4a5c0fc2f447e2df24c1/build/webpack.common.js/>- 入口文件导入了引入的对象 https://github.com/ElemeFE/element/blob/6ec5f8e900ff698cf30e9479d692784af836a108/src/index.js#L248
不带相对路径就是默认项目 node_modules 里找,这种是省略写法,其实就是 /node_modules/element-ui/index.js ,这样好理解了吧
你自己贴的阮一峰的文章里面也有讲到这个从模块而非某个路径 import 的语法,见:
http://es6.ruanyifeng.com/后面的 from 指定模块文件的位置,可以是相对路径,也可以是绝对路径,.js 后缀可以省略。如果只是模块名,不带有路径,那么必须有配置文件,告诉 JavaScript 引擎该模块的位置。
import {myMethod} from 'util';
而所谓的配置文件可能就要看你的项目本身了,如果你用了 webpack 的话,那详见 webpack 文档:
https://webpack.js.org/concepts/module-resolution/node_modules
不严谨地(直觉上)说,import ... from 后面接的东西如果是点开头的,也就是相对路径,引入的就是你自己的文件,如果不是点开头的,就是从外部(可能是通过包管理安装的别人写库)引入的文件。那个 element-ui 就是这个模块: https://www.npmjs.com/package/element-ui
非常严谨地(但不直观)说,开头有点的,按照相对路径找,开头没点的到 node_modules 文件夹里面找
小杠一下举个例外:import xxx from 'https://xxxxx'
我想这个很好理解啊,看下文档就知道规则了,这还要问!。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
哈,这种写法我第一次见,长见识了,这个和 go 它俩谁抄的谁啊