IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 前端ES5,ES6模块Demo -> 正文阅读

[JavaScript知识库]前端ES5,ES6模块Demo

一,ES5的模块化demo(基于vscode演示)

1,如下方式创建文件夹,分别创建es5,es6文件夹
在这里插入图片描述

2,在moduledemo 的路径下打开命令终端。
使用 npm init -y 初始化当前文件夹为node项目
在这里插入图片描述

3,在es5文件夹下创建 01.js 和 02.js 文件。
01.js

const sum = function(a,b){
    return parseInt(a) + parseInt(b);
}
const subtract = function(a, b){
    return parseInt(a) - parseInt(b);
}

// 设置可以导出的对象
module.exports = {
    sum, subtract
}

02.js

const m = require('./01.js')

const m1 = m.sum(1,2)
const m2 = m.subtract(5, 1);

console.log(m1)
console.log(m2)

4,然后,在es5的路径下打开终端
在这里插入图片描述
5, 使用node 02.js 命令,运行js 文件。 可以得到输出结果。
在这里插入图片描述

二,ES6模块使用demo

1,使用es6文件夹,在es6 文件夹下创建001.js 和 002.js 文件。
001.js

 export function add(){
    console.log('add......')
 }
 export function update(){
    console.log('update.......')
 }
 

002.js

import {add, update} from "./001.js"
add()
update()

2,安装babel 转码器。 因为es6的语法,需要转为es5 的语法,才能被node使用识别。

可以在es6 目录下执行下面的命令:
在这里插入图片描述

npm install --global babel-cli

3,在根路径 moduledemo下创建一个 .babelrc 文件
在这里插入图片描述
在该文件中加入下面的内容:

{
    "presets":["es2015"],
    "plugins":[]
}

4,安装一个 2015的转码器
在这里插入图片描述
执行如下的命令:

npm install --save-dev babel-preset-es2015

5,然后在根文件夹下打开命令终端。
在这里插入图片描述
6,在根目录下创建一个文件夹es6-1。将转码后生成的es5语法的js文件生成到这个目录下面。
在这里插入图片描述
7,使用 babel es6 -d es6-1 命令进行转码
在这里插入图片描述
8,在es6-1 的文件夹下打开终端,执行node 命令。
在这里插入图片描述

三,ES6模块的另一种写法

001.js

export default{
    add(){
        console.log('这是一个add 方法....')
    },
    update(){
        console.log('这是一个update 方法....')
    }
}

002.js

import user from "./001.js"

user.add();
user.update();

其他操作步骤和上面的一样。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-09-04 01:02:48  更:2022-09-04 01:06:31 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 10:50:33-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码