V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
lxk11153
V2EX  ›  JavaScript

js import 语法问题

  •  
  •   lxk11153 · 2020-01-03 23:40:36 +08:00 · 3864 次点击
    这是一个创建于 1765 天前的主题,其中的信息可能已经有所发展或是发生改变。
    • 不是前端,且 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
        1
    randyo  
       2020-01-03 23:42:27 +08:00 via Android
    就是从 element-ui 里面引入 Notification 啊,还能有啥意思
    lxk11153
        2
    lxk11153  
    OP
       2020-01-03 23:46:31 +08:00
    @randyo #1 './xxx.js' `.js`好理解就是从文件,可是'element-ui'我就不知道怎么理解了?是约定还是什么?'element-ui'指向某文件???
    Biwood
        3
    Biwood  
       2020-01-03 23:47:27 +08:00   ❤️ 1
    是的,下面那种写法是基于这些工具:webpack、babeljs 以及 element-ui 教程里提到的 babel-plugin-component
    Biwood
        4
    Biwood  
       2020-01-03 23:49:09 +08:00
    再补充一个大前提,该项目是用一个叫 npm 的东西来安装 element-ui 的,上面提到的工具都需要通过 npm 安装
    dengshen
        5
    dengshen  
       2020-01-03 23:49:41 +08:00 via iPhone
    一个文件可以导出多个变量 /函数。
    import 大括号中导出某一个变量 /函数。
    Hario
        6
    Hario  
       2020-01-03 23:55:28 +08:00 via Android
    element-ui 是个组件库吧,用的话要用 npm 安装,然后按需导入组件。说错勿怪。
    randyo
        7
    randyo  
       2020-01-04 00:02:00 +08:00 via Android
    @lxk11153 现在都是要使用 npm 安装依赖,然后通过 webpack 之类的工具打包,这些工具打包的时候会去 npm 安装的依赖下面(最近的是项目根目录下的 node_modules 文件夹下面)找到这个模块,把代码拉出来打包
    Shook
        8
    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
        9
    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
        10
    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
        11
    ipwx  
       2020-01-04 00:23:06 +08:00
    不懂就去学啊。问这些基础问题有个屁用
    gbin
        12
    gbin  
       2020-01-04 00:24:15 +08:00
    onfuns
        13
    onfuns  
       2020-01-04 01:00:18 +08:00 via Android   ❤️ 1
    不带相对路径就是默认项目 node_modules 里找,这种是省略写法,其实就是 /node_modules/element-ui/index.js ,这样好理解了吧
    marcong95
        14
    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
        15
    sneezry  
       2020-01-04 06:32:48 +08:00
    不严谨地(直觉上)说,import ... from 后面接的东西如果是点开头的,也就是相对路径,引入的就是你自己的文件,如果不是点开头的,就是从外部(可能是通过包管理安装的别人写库)引入的文件。那个 element-ui 就是这个模块: https://www.npmjs.com/package/element-ui

    非常严谨地(但不直观)说,开头有点的,按照相对路径找,开头没点的到 node_modules 文件夹里面找
    jinliming2
        16
    jinliming2  
       2020-01-04 08:03:25 +08:00 via iPhone
    @sneezry 小杠一下举个例外:import xxx from 'https://xxxxx'
    zhw2590582
        17
    zhw2590582  
       2020-01-04 09:16:16 +08:00 via iPhone
    我想这个很好理解啊,看下文档就知道规则了,这还要问!。
    sneezry
        19
    sneezry  
       2020-01-04 13:20:22 +08:00 via iPhone
    @jinliming2 哈,这种写法我第一次见,长见识了,这个和 go 它俩谁抄的谁啊😂
    nanyang24
        20
    nanyang24  
       2020-01-04 17:02:57 +08:00
    看评论前 5 条也没有解答 LZ 的问题
    如今在网上求解可太难了,还要冒着被喷的危险
    lxk11153
        21
    lxk11153  
    OP
       2020-01-05 05:30:32 +08:00
    @nanyang24 #20 三楼是我想要的答案。
    1. 因为我只会写"browser-compatible JavaScript",没用过其它 JavaScript compiler,所以就不懂那些高级的语法了
    2. 也非常感谢其他人的回答。包括已经具体到如何一步步找到最终的引入文件,不过有一丢丢文不对题,还没到那些 js compiler 的使用上呢
    cirzear
        22
    cirzear  
       2020-01-05 13:20:11 +08:00
    就是从 element-ui 的组件库中只引入自己需要的组件
    Sapp
        23
    Sapp  
       2020-01-07 18:19:40 +08:00
    @nanyang24 可我寻思前五条不都是在解答问题么? 而且你前面不就 11、17 楼在“喷”么? 如今网上解答个问题可太难了,一不小心还要被嘲讽
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   993 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 20:15 · PVG 04:15 · LAX 13:15 · JFK 16:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.