b2bchain区块链学习技术社区本文介绍了六、8.1 ES6 Modules求职学习资料，有助于帮助完成毕业设计以及求职，是一篇很好的资料。
对技术面试,学习经验等有一些体会，在此分享。
Create React App 是一个用于学习 React 的集成环境。与此同时，他也是一个学习 ES6 Modules 的舒适环境。因此为了降低学习成本，我们直接使用该环境来学习 ES6 Moduels 语法。
1. 创建项目
npx create-react-app my-app --template typescript cd my-app npm start项目启动需要花费一点时间，启动之后，通常浏览器会自动打开一个新的页面运行项目，我们也可以在浏览器中输入 http://localhost:3000 来运行项目。
2. 认识项目
package.json 与 yarn.lock
这两个文件是构建工具需要的配置信息与项目依赖包信息。目前暂时不用过多的考虑他们的用处，等之后大家在深入学习构建工具时自然会明白他们的作用。
node_modules
项目依赖包的安装目录。当我们创建项目时，会根据配置文件 package.json 中的依赖包信息把所有需要的插件工具模块等都安装在该目录下。
public
用于存放静态文件。主要作用是 html 入口文件的存放。我们也可以存放其他公用的静态资源，如图片，css 文件等。其中的 index.html 就是我们项目的入口 html 文件。
src
模块与组件的存放目录。在 create-react-app 创建的项目中，每一个单独的文件都可以被看成一个单独的模块，单独的 image，单独的 css，单独 js 等，而所有的组件都存放于 src 目录中，其中 index.tsx 则是 js 的入口文件。虽然我们并没有在 index.html 中使用 script 标签引入它，但是他的作用就和此一样。
项目地址：点这里
typescript 可以通过阅读最后的附录章节学习
如果你要直接使用我的项目，则需要先使用
npm run install重新安装依赖才能正常使用
项目中的 src/index.tsx 是项目的入口文件，其他的代码我们先不关注，在 src 目录下创建一个新的模块用于学习。
3. 创建模块
一个 js/ts 文件就是一个单独的模块。模块创建的目的，就是让其他模块能够使用该模块的功能。因此，除了主模块，其他的模块都需要抛出接口，以决定该模块中那些能够可以被其他模块使用。
通过 export 关键字可以对外抛出接口。
export const name1 = 'TOM'export 可以多次使用，抛出多个接口。
// module01.js export const name1 = 'TOM' export const name2 = 'Jake'当我们在其他模块引入该模块的接口时，如果只需要其中一个接口
import {name1} from './module01'但是如果我们需要引入该模块中所有的对外接口，一种方式是在大括号中将所有的名称都列出来，另外一种方式就是使用通配符与 as 配合。
import { name1, name2 } from './module01'; // or 利用别名的方式 import * as module01 from './module01'; // 那么就有 name1 = module01.name1 name2 = module01.name2我们还可以通过 export default 来对外提供接口，这种情况下，对外的接口通常都是一个对象。
“`js
// 修改module01.js
const name1 = ‘TOM’;
const name2 = ‘Jake’;
// ES6对象的简写语法
export default {
name1,
Create React App 是一个用于学习 React 的集成环境。与此同时，他也是一个学习 ES6 Modules 的舒适环境。因此为了降低学习成本，我们直接使用该环境来学习 ES6 Moduels 语法。
1. 创建项目
npx create-react-app my-app --template typescript cd my-app npm start项目启动需要花费一点时间，启动之后，通常浏览器会自动打开一个新的页面运行项目，我们也可以在浏览器中输入 http://localhost:3000 来运行项目。
2. 认识项目
package.json 与 yarn.lock
这两个文件是构建工具需要的配置信息与项目依赖包信息。目前暂时不用过多的考虑他们的用处，等之后大家在深入学习构建工具时自然会明白他们的作用。
node_modules
项目依赖包的安装目录。当我们创建项目时，会根据配置文件 package.json 中的依赖包信息把所有需要的插件工具模块等都安装在该目录下。
public
用于存放静态文件。主要作用是 html 入口文件的存放。我们也可以存放其他公用的静态资源，如图片，css 文件等。其中的 index.html 就是我们项目的入口 html 文件。
src
模块与组件的存放目录。在 create-react-app 创建的项目中，每一个单独的文件都可以被看成一个单独的模块，单独的 image，单独的 css，单独 js 等，而所有的组件都存放于 src 目录中，其中 index.tsx 则是 js 的入口文件。虽然我们并没有在 index.html 中使用 script 标签引入它，但是他的作用就和此一样。
项目地址：点这里
typescript 可以通过阅读最后的附录章节学习
如果你要直接使用我的项目，则需要先使用
npm run install重新安装依赖才能正常使用
项目中的 src/index.tsx 是项目的入口文件，其他的代码我们先不关注，在 src 目录下创建一个新的模块用于学习。
3. 创建模块
一个 js/ts 文件就是一个单独的模块。模块创建的目的，就是让其他模块能够使用该模块的功能。因此，除了主模块，其他的模块都需要抛出接口，以决定该模块中那些能够可以被其他模块使用。
通过 export 关键字可以对外抛出接口。
export const name1 = 'TOM'export 可以多次使用，抛出多个接口。
// module01.js export const name1 = 'TOM' export const name2 = 'Jake'当我们在其他模块引入该模块的接口时，如果只需要其中一个接口
import {name1} from './module01'但是如果我们需要引入该模块中所有的对外接口，一种方式是在大括号中将所有的名称都列出来，另外一种方式就是使用通配符与 as 配合。
import { name1, name2 } from './module01'; // or 利用别名的方式 import * as module01 from './module01'; // 那么就有 name1 = module01.name1 name2 = module01.name2我们还可以通过 export default 来对外提供接口，这种情况下，对外的接口通常都是一个对象。
“`js
// 修改module01.js
const name1 = ‘TOM’;
const name2 = ‘Jake’;
// ES6对象的简写语法
export default {
name1,
Create React App 是一个用于学习 React 的集成环境。与此同时，他也是一个学习 ES6 Modules 的舒适环境。因此为了降低学习成本，我们直接使用该环境来学习 ES6 Moduels 语法。
1. 创建项目
npx create-react-app my-app --template typescript cd my-app npm start项目启动需要花费一点时间，启动之后，通常浏览器会自动打开一个新的页面运行项目，我们也可以在浏览器中输入 http://localhost:3000 来运行项目。
2. 认识项目
package.json 与 yarn.lock
这两个文件是构建工具需要的配置信息与项目依赖包信息。目前暂时不用过多的考虑他们的用处，等之后大家在深入学习构建工具时自然会明白他们的作用。
node_modules
项目依赖包的安装目录。当我们创建项目时，会根据配置文件 package.json 中的依赖包信息把所有需要的插件工具模块等都安装在该目录下。
public
用于存放静态文件。主要作用是 html 入口文件的存放。我们也可以存放其他公用的静态资源，如图片，css 文件等。其中的 index.html 就是我们项目的入口 html 文件。
src
模块与组件的存放目录。在 create-react-app 创建的项目中，每一个单独的文件都可以被看成一个单独的模块，单独的 image，单独的 css，单独 js 等，而所有的组件都存放于 src 目录中，其中 index.tsx 则是 js 的入口文件。虽然我们并没有在 index.html 中使用 script 标签引入它，但是他的作用就和此一样。
项目地址：点这里
typescript 可以通过阅读最后的附录章节学习
如果你要直接使用我的项目，则需要先使用
npm run install重新安装依赖才能正常使用
项目中的 src/index.tsx 是项目的入口文件，其他的代码我们先不关注，在 src 目录下创建一个新的模块用于学习。
3. 创建模块
一个 js/ts 文件就是一个单独的模块。模块创建的目的，就是让其他模块能够使用该模块的功能。因此，除了主模块，其他的模块都需要抛出接口，以决定该模块中那些能够可以被其他模块使用。
通过 export 关键字可以对外抛出接口。
export const name1 = 'TOM'export 可以多次使用，抛出多个接口。
// module01.js export const name1 = 'TOM' export const name2 = 'Jake'当我们在其他模块引入该模块的接口时，如果只需要其中一个接口
import {name1} from './module01'但是如果我们需要引入该模块中所有的对外接口，一种方式是在大括号中将所有的名称都列出来，另外一种方式就是使用通配符与 as 配合。
import { name1, name2 } from './module01'; // or 利用别名的方式 import * as module01 from './module01'; // 那么就有 name1 = module01.name1 name2 = module01.name2我们还可以通过 export default 来对外提供接口，这种情况下，对外的接口通常都是一个对象。
“`js
// 修改module01.js
const name1 = ‘TOM’;
const name2 = ‘Jake’;
// ES6对象的简写语法
export default {
name1,
部分转自互联网，侵权删除联系
最新评论