import语法参考
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import

https://www.jb51.net/article/147127.htm
https://zhuanlan.zhihu.com/p/144475026
https://www.cnblogs.com/kreo/p/11069640.html

import全局代码

  1. // 仅为副作用而导入一个模块: 运行模块中的全局代码, 但实际上不导入任何值
  2. import '/modules/my-module.js';
  4. import 'js-base64';
  6. require('js-base64')

import用法

  1. // 导入默认值
  2. import defaultExport from "module-name";
  4. // 混合导入，default必须首先声明
  5. import defaultExport, { export1 [, [...] ] } from "module-name";
  6. import defaultExport, * as name from "module-name";
  7. import * as name from "module-name";
  9. // 导入单个接口
  10. import { export1 } from "module-name";
  12. // 导入带有别名的接口
  13. import { export1 as alias } from "module-name";
  14. // 导入时重命名多个接口
  15. import { export1, 
  16.   export2 as alias2,
  17.   anotherLongModuleName as short,
  18. } from "module-name";
  20. // 导入多个接口
  21. import { export1 , export2 } from "module-name";
  22. import { foo , bar } from "module-name/path/to/specific/un-exported/file"
  26. // 动态import
  27. let module = await import('/modules/my-module.js');
  28. import('/modules/my-module.js')
  29.   .then((module) => {
  30.     // Do something with the module.
  31.   });

es6 Module

  1. import {Component} from 'react';
  3. import * as React from 'react'

nodejs commonjs模块

  1. const { Compnent } = require('react');
  3. const React = require('react');

import 结构赋值报错

import不能结构赋值，直接导入该对象的name属性，会报错
import { obj: {name} } from ‘./export.js’ 报错

import语法为啥不支持结构赋值？
export.js 经过 webpack 和 babel 的转换，不符合babel的解析规则

  1. import { obj } from './export.js'
  2. // 经过 webpack 和 babel 的转换，变为：
  3. "use strict";
  4. var _export = require("../export")
  6. // 正确的用法
  7. import { obj } from './export.js'
  8. const {name} = _export.obj // 变量可以结构赋值，import不支持结构赋值