ES6语法中引入&导出

Posted 7086cmd

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6语法中引入&导出相关的知识,希望对你有一定的参考价值。

ES6中,在js中,肯定是使用exportimport分别暴露模块和引入模块。
而然,使用过Vue.js的人,都会知道export defaultexport

export的英语:出口

import的英语:入口

而然,export和import,息息相关。

参考文档:https://blog.csdn.net/weixin_43318134/article/details/99242459


Node.js

我们在Node.js中,使用

var 名称=require(‘模块标识符‘);

来引入。
而暴露成员使用:

moudle.exports={}

或者:

      exports{}

而然在ES6中:

暴露

我们使用

export default{
}

或者

export {
}

来进行暴露。

(题外话,这个ECMAScript2015没有的)

我们用实例来看下。
我们创建一个try.js

export default{
      dem:"Hello",
      data(){
            return{
            }
      },
      methods:{
      }
}

或者这样也可以:

var vm={
      dem:"Hello",
      data(){
            return{
            }
      },
      methods:{
      }
}
export default vm;

我们在main.js中(或者index.js中,具体看package.jsonmain值)写入:

import vm from ‘./try.js‘;
alert(vm.dem);

index.html中写入:

<!DOCTYPE html>
<html>
      <head>
            <title>Hello, World!</title>
            <meta charset="utf-8">
            <script src="./main.js"></script>
      </head>
      <body>
            
      </body>
</html>

WOW! Hello弹出来了!

我们在ElementUI中等等,按需引入使用

import { Button, Select } from ‘element-ui‘;

直接引入了Button, Select。(.babelrc已修改)
而然,完整引入是

import ElementUI from ‘element-ui‘;

这里我发现,修改ElementUI然后

Vue.use(ElementUI);

相应变化后,依然可以在项目中使用ElementUI。
技术图片
怎么做到的?

其实,在import中,按需引入需要使用大括号包围,而暴露的js也需要相应地按需暴露。
才有了

import ElementUI,{Button,Select} from ‘element-ui‘

的出现。

如何相应暴露?
使用

export var 变量名=内容;

暴露,而main.js中使用

import {相应模块名字} from ‘地点‘;

来引入。
我们在try.js中写着

export var vm = {
      dem:"Hello",
      data(){
            return{
            }
      },
      methods:{
      }
};

main.js中写入

import {vm} from ‘./try.js‘;

效果一样。










以上是关于ES6语法中引入&导出的主要内容,如果未能解决你的问题,请参考以下文章

ES6躬行记——代码模块化

es6引用模块import后面加上花括号{}和不加花括号的区别

微信小程序JS导出和导入

ES6模块化编程

es6新增在vue中常用语法

为啥我不能在汇总配置文件中使用 ES6 导入/导出?