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)
  • 通天塔
  • Webpack
  • CoffeeScript
  • CodeMirror
  • 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模块
    • JS import reference
    • JS export reference
    • CoffeeScript modules

    推荐答案

    让我们假设您有一个名为'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"的测试模块"的成员，而不是默认的导出.在这种情况下，它就是函数"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';
    

    正在请求一个带有测试模块"的所有已命名出口的对象.

    is asking for an object with all of the named exports of '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屋！