ES6 export注意事项

在创建JavaScript模块时,export 语句用于从模块中导出函数、对象或原始值,以便其他程序可以通过 import 语句用于导入由另一个模块导出的绑定。无论是否声明了 strict mode ,导入的模块都运行在严格模式下。在浏览器中,import 语句只能在声明了 type="module" 的 script 的标签中使用。") 语句使用它们。参见MDN

export

先解决export错误的写法

错误写法

//编译不通过
var m = 1;
export m;
//改为 以下形式可通过
export {m}
//对应的import要写成import {m} from './export.js'

默认导出时要注意:不能使用 var、let 或 const 用于导出默认值 export default。

怎么导出?

  1. 命名导出:使用import命令的时候,用户需要知道所要加载的变量名或函数名
//导出函数
function cube(x) {
  return x * x * x;
}
导出常量
const foo = Math.PI + Math.SQRT2;
//导出变量
var graph = {
    options: {
        color:'white',
        thickness:'2px'
    },
    draw: function() {
        console.log('From graph draw function');
    }
}
export { cube, foo, graph };
\\在另一个模块中导入:注意大括号
import { cube, foo, graph } from 'my-module';
graph.options = {
    color:'blue',
    thickness:'3px'
}; 
graph.draw();
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888
  1. 默认导出:使用import命令的时候,用户不需要知道所要加载的变量名或函数名
    如果我们要导出一个值或模块中的返回值,就可以使用默认导出:
// module "my-module.js"
export default function cube(x) {
  return x * x * x;
}

然后,在另一个脚本中,可以直接导入默认导出:

// module "my-module.js"
import cube from 'my-module';
console.log(cube(3)); // 27​​​​​

不可以的写法

//可改为 const a = 1; export default a;
export default const a = 1;
//export default [const|let|var] variable = xxx 的方式均不可

注意,不能使用 var、let 或 const 用于导出默认值 export default。

你可能感兴趣的:(ES6 export注意事项)