ES2015 `import * as` 与普通的 `import` 之间的区别 [英] Difference between ES2015 `import * as` vs just plain `import`

问题描述

我刚刚修复了一个错误，将 import * as CodeMirror 更改为纯 import CodeMirror.

I just fixed a bug by changing import * as CodeMirror to just plain import CodeMirror.

• 我复制了这段代码.(从 TypeScript 移植)
• import * as CodeMirror 一直有效，直到一个插件因其副作用而被导入:预期的新 fold 属性未定义.

• I copied this code. (Porting it from TypeScript)
• import * as CodeMirror worked until an addon was imported for its side effects: the expected new fold property was undefined.

问题:(我试图更好地理解发生了什么)

Questions: (I am trying to understand what happened better)

• 发生了什么事?此更改如何修复错误?
• 谁将 default 属性添加到 CodeMirror?(或者更有可能:将模块包装在另一个看起来非常相似的对象中)最有可能的嫌疑人:
  • JavaScript 模块 (ES2015)
  • 通天塔
  • 网页包
  • CoffeeScript
  • 代码镜像
  • What is going on? How did this change fix the bug?
  • Who is adding the default property to CodeMirror? (Or more likely: wrapping the module inside another object that looks very similar) The most likely suspects:
    • JavaScript modules (ES2015)
    • Babel
    • Webpack
    • CoffeeScript
    • CodeMirror

    更多详情:

    此代码无法按预期工作:

    import * as CodeMirror from 'codemirror'
    import 'codemirror/addon/fold/indent-fold.js'  # should add `fold` object to `CodeMirror`
    
    console.log typeof CodeMirror          ## 'object'
    console.log typeof CodeMirror.fold     ## 'undefined'
    console.log typeof CodeMirror.default  ## 'function'  
    
    ## Work-around:
    console.log typeof CodeMirror.default.fold  ## 'object'
    

    此代码按预期工作:

    import CodeMirror from 'codemirror'
    import 'codemirror/addon/fold/indent-fold.js'  # should add `fold` object to `CodeMirror`
    
    console.log typeof CodeMirror          ## 'function'
    console.log typeof CodeMirror.fold     ## 'object'
    console.log typeof CodeMirror.default  ## 'undefined'
    

    <小时>

    我已经研究过这些资源，但它们并没有帮助我完全理解发生了什么:

    ---

    I have already studied these resources, but they have not helped me fully understand what happened:

    • JS 导入参考
    • JS 导出参考
    • CoffeeScript 模块

    推荐答案

    假设您有一个名为test-module"的非常简单的模块，其中包含:

    Let's assume you have a very simple module named 'test-module', in it you have:

    var test = 'test';
    export default test;
    export function helloWorld () { ... };
    

    当你这样做时:

    import something from 'test-module';
    

    您只是在导入some-module"的默认导出.在这种情况下，它是字符串测试.默认导出可以是任何东西，对象，函数等.

    you are only importing the default export of 'some-module'. In this case, it is the string test. The default export can be anything, object, function, etc.

    当你这样做时:

    import {helloWorld} from 'test-module';
    

    您正在专门导入名为helloWorld"的test-module"成员，而不是默认导出.在这种情况下，它是函数 'helloWorld'.

    You are specifically importing a member of 'test-module' named 'helloWorld' and not the default export. In this case, it is the function 'helloWorld'.

    如果你这样做了:

    import {something} from 'test-module';
    

    某物"将是未定义"，因为没有使用该名称的导出.

    The 'something' would be 'undefined' since there is no export for with that name.

    import * as something from 'test-module';
    

    正在请求一个包含test-module"的所有命名导出的对象.

    is asking for an object with all of the named exports of 'test-module'.

    然后您可以访问test-module"中的任何导出作为something.name.在这种情况下，它们将是 something.default 和 something.helloWorld.

    Then you can access any of the exports in 'test-module' as something.name. In this case they will be something.default and something.helloWorld.

    这篇关于ES2015 `import * as` 与普通的 `import` 之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！