自我学习之es6(7)

最新推荐文章于 2024-03-27 14:00:23 发布

原创最新推荐文章于 2024-03-27 14:00:23 发布 · 533 阅读

本内容遵循CC 4.0 BY-SA版权协议

标签

#es6 #模块化

126 篇文章

订阅专栏

本文详细介绍了如何在Node环境中配置并使用ES6模块化。包括安装Node.js、配置淘宝镜像、创建React应用等步骤，并演示了如何通过export和import进行模块间的函数与变量导出与引入。

关于ES6的模块化，首先需要配置node环境。配置方法如下：

1、在nodeJS官网https://nodejs.org/en/download/，windows下载Windows Installer (.msi)，下载完后，按照安装软件的步骤一步步安装

2、打开cmd，输入node -v如果有弹出版本号证明安装成功

3、安装淘宝镜像（安装这个的目的是需要安装其它的工具，而这些工具基本都是国外的，所以安装速度非常的慢。而淘宝镜像把这些已经转到国内，安装的速度会非常快，如果你不嫌弃慢的话可以忽略这个步骤）

windows下在命令行里输入

npm install -g cnpm --registry=https://registry.npm.taobao.org

4、从命令行里进入到本项目

5、运行npm -g create-react-app，安装create-react-app，如果已经安装过create-react-app，就不需要再安装了。

6、运行npm i，安装项目依赖

7、运行npm start，开启项目

至此，所有的前期准备已经完成、可以在src/index.js里面写代码

在src下新建一个modules的文件夹，在这个文件夹下先建一个a.js，再建一个b.js，先在a.js里写一个方法

function a(){
console.log('a 这个东西');
}

再在b.js里同样写一个方法

function b(){
console.log('b 这个东西');
}

然后再在a.js及b.js的方法前加export default

export default function a(){
	console.log('a这个东西')
}

export default function b(){
	console.log('b这个东西')
}

然后再在index.js里用import导入a这个函数

import a from './modules/a';
a();

import b from './modules/b';
b();

这就是es6的语法，export默认导出，import接收默认导出，接收默认导出的时候可以任意命名

import anm from './modules/a';
anm();

而默认导出，导出的东西是可以没有名字的

es6里还有另一种导出，即导出数值

export let num=789;

而在接收的时候，则是把num这个变量写在一个大括号里再打印出这个变量

import {num} from './modules/a';
console.log(num);

这些是关于export default和export方面怎么去导出东西的，如果一个项目中同时用了export default和export 两种导出方式，那接收的时候可以用一句话就能接收了

import anm,{num} from './modules/a';

使用export导出有个特性即可以使用多次export来导出

export let num=789;
export let bvc=789;

在接收时也可以把两个变量都写在大括号里

import anm,{num,bvc} from './modules/a';
console.log(num,bvc);

注意export default只能导出一次，而export可以多次导出

可以同时从b.js里接收函数

import anm,{num,bvc} from './modules/a';
import b from './modules/b';

anm();
b();

console.log(num,bvc);

文件名后缀.js可以不写