关于export和export default你不知道的事

更新日期: 2019-03-19阅读量: 2795标签: 模块

网上有很多关于export和export default的文章,他们大部门都是只讲了用法,但是没有提到性能,打包等关键的东西。 大家应该应该能理解import * from 'xxx'会把文件中export default的内容都打包到文件中,而import {func} from 'xxx' 只会把文件中的func导入,这样势必export会比export default打包的少。看例子

utils.js

const func1 = () => {
    console.log('func1');
}

const func2 = () => {
    console.log('func2');
}

export default {
    func1,
    func2
}

index.js

import { render } from "react-dom";
import common from './common';

class Index extends Component {
  render() {
    common.func1();
    return (
      123456
    );
  }
}

render(<Index />, document.getElementById('app'));


用这种export default的方法那么打包的文件会是怎么样的呢?我们看看

我们发现整个文件被打包了,用另一种方式

utils.js

const func1 = () => {
    console.log('func1');
}

const func2 = () => {
    console.log('func2');
}

export {
    func1,
    func2
}

index.js

import { render } from "react-dom";
import {func1} from './common';

class Index extends Component {
  render() {
    func1();
    return (
      123456
    );
  }
}

render(<Index />, document.getElementById('app'));

结果:只打包了func1

综上export default确实可能会打包更多不需要的内容,但是在某些场景用export default更好。所以总结如下:

1.当文件存放着很多方法,变量不同场景需要引用不同方法,请用export 
2.当类只有某几个方法,并且每次引用都需要用到里面的大部分方法,请用export default, 毕竟还有方法提示 
3.当值导出一个方法,类请用export default 4.如果一个文件只会被某一个其他文件的子文件,不会被其他文件引用,并且其中的方法都会被用到, 考虑用export default。比如某个业务文件夹下的action.js,用的时候用import api from './action'; 方便识别,不用重复在import的{}中添加,也可以用方法提示。 
4.如果一个文件兼有以上需求 可以同时export和export default 

 


链接: https://www.fly63.com/article/detial/2436

Javascript模块的写法-AMD, CMD, CommonJS和UMD

Javascript模块的写法-AMD, CMD, CommonJS和UMD。JavaScript中出现了一些非传统模块开发方式的规范 CommonJS的模块规范,AMD,CMD等。

ES6模块功能:export和import的加载方式

ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。

Node的https模块_创建HTTPS服务器

Node的https模块:HTTPS服务器使用HTTPS协议,需要证书授权,SSL安全加密后传输,使用443端口

如何让 node 运行 es6 模块文件,及其原理

最新版的 node 支持最新版 ECMAScript 几乎所有特性,但有一个特性却一直到现在都还没有支持,那就是从 ES2015 开始定义的模块化机制。而现在我们很多项目都是用 es6 的模块化规范来写代码的,包括 node 项目

module、export、require、import的使用

module每个文件就是一个模块。文件内定义的变量、函数等等都是在自己的作用域内,都是自身所私有的,对其它文件不可见。在module中有一个属性exports,即:module.exports。它是该模块对外的输出值,是一个对象。

Node.js - 模块系统

模块是Node.js 应用程序的基本组成部分,文件和模块是一一对应的。换言之,一个 Node.js 文件就是一个模块,这个文件可能是JavaScript 代码、JSON 或者编译过的C/C++ 扩展。Node.js 提供了 exports 和 require 两个对象

ES模块基础用法及常见使用问题

ES6中引入了模块(Modules)的概念,相信大家都已经挺熟悉的了,在日常的工作中应该也都有使用。本文会简单介绍一下ES模块的优点、基本用法以及常见问题。

ES6 export 和 export default的区别

ES6中 export 和 export default 与 import使用的区别,使用 react native 代码详解,现在流行的前端框架,angular+ 主要使用 export 导出模块,react native 中使用 export default 导出模块,如今编辑器非常强大,安装插件会自动弹出模块名称,知道其导出怎么使用就可以了

export和export default的区别

export与export default均可用于导出常量、函数、文件、模块;你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用;

JS模块化_CommonJS AMD CMD UMD ES6 Module 比较

模块化开发优点:模块化开发中,通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数,并且可以按需加载。依赖自动加载,按需加载。提高代码复用率,方便进行代码的管理,使得代码管理更加清晰、规范。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!