ES6和node模块化
node模块化:
1.输出:exports.a=12;
或者module.exports={
a:12,
b:5
}
2.引入:require('./a.js');
3.引用自定义模块
放到node_modules里
前面加./
ES6模块化:
一、输出
export(a,b,c,...);
二、引入
import m from './a.js';
三、例如:
js文件夹下的a.js中
let a=12;
let b=5;
export{a,b};
a.html中
import mod from './a.js';
console.log(mod.a+mod.b); //17
四、用babel编译es6
1.全局安装babel:cnpm i -g babel-cli
2.新建文件夹babel_es6
3.新建js文件夹,文件夹中新建a.js文件,a.js文件中写入es6代码
4.新建a.html文件,引入a.js文件
5.在命令行中进入babel_es6文件夹中:cd babel_es6
6.执行npm init
7.在生成的package.json文件中scripts加入: "build":"babel src -d build"
其中src是源文件夹,build是编译后自动生成的文件夹,和src对应。
8.新建文件.babelrc,该文件中的内容是
{
"presets":["env"]
}
9.在命令行中安装:cnpm install babel-preset-env --save-dev
10.执行npm run build
11.编译成功
ES6和node模块化的更多相关文章
- Node入门教程(6)第五章:node 模块化(上)模块化演进
node 模块化 JS 诞生的时候,仅仅是为了实现网页表单的本地校验和简单的 dom 操作处理.所以并没有模块化的规范设计. 项目小的时候,我们可以通过命名空间.局部作用域.自执行函数等手段实现变量不 ...
- es6中的模块化
在之前的javascript中是没有模块化概念的.如果要进行模块化操作,需要引入第三方的类库.随着技术的发展,前后端分离,前端的业务变的越来越复杂化.直至ES6带来了模块化,才让javascript第 ...
- Node模块化
Node.js是一个能够在服务器端运行JavaScript的开放源代码.跨平台JavaScript运行环境.Node是对ES标准一个实现,也是一个JS引擎.与传统服务器不同是Node的服务器是单线程的 ...
- ES6和node的模块化
ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量.CommonJS 和 AMD 模块,都只能在运行时确定这些东西.比如,CommonJS 模块就是对象,输入 ...
- 前端MVC Vue2学习总结(七)——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例
使用vue-cli可以规范项目,提高开发效率,但是使用vue-cli时需要一些ECMAScript6的知识,特别是ES6中的模块管理内容,本章先介绍ES6中的基础与模块化的内容再使用vue-cli开发 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础:ES6初体验 & 模块化编程
缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...
- Vue-cli+Vue.js2.0+Vuex2.0+vue-router+es6+webpack+node.js脚手架搭建和Vue开发实战
Vue.js是一个构建数据驱动的web界面的渐进式框架.在写这边文章时Vue版本分为1.0++和2.0++,这个是基于Vue2.0的项目. Vue-cli是构建单页应用的脚手架,这个可是官方的. Vu ...
- Node入门教程(7)第五章:node 模块化(下) npm与yarn详解
Node的包管理器 JavaScript缺少包结构的定义,而CommonJS定义了一系列的规范.而NPM的出现则是为了在CommonJS规范的基础上,实现解决包的安装卸载,依赖管理,版本管理等问题. ...
- 利用babel-cli搭建支持ES6的node环境
现在ES6盛行,开始大量使用ES6的特性敲代码,但限于Node.js本身对ES6的特性支持的不够完备,那么需要借助于其他工具来完成. 基本上,现在都直接写ES6的代码,然后使用babel-cli提供的 ...
- ES6和Node容易搞混淆的点
ES6 import 模块名 from XX '模块标识符' -----导入模块 import '路径 ' -----导入CSS样式 export default { } 和export ...
随机推荐
- 基于Sa-Token实现微服务之前的单点登录
修改配置文件,准备好四个域名 127.0.0.1 auth.server.com 127.0.0.1 user.server.com 127.0.0.1 third.server.com 127.0. ...
- knn和线性分类器
一.knn算法概述 knn首选是最简单的分类算法,其是有监督学习的分类算法之一. 二.knn算法过程 knn(k nearest neighbors k个最近的邻居):knn是当预测一个新的值x的时候 ...
- 【Azure Event Hub】自定义告警(Alert Rule)用来提示Event Hub的消息incoming(生产)与outgoing(消费)的异常情况
问题描述 在使用Azure Service Bus的时候,我们可以根据Queue中目前存在的消息数来判断当前消息是否有积压的情况. 但是,在Event Hub中,因为所有消息都会被存留到预先设定的保留 ...
- Python 学习路线图
Python 学习路线图 在这个系列笔记中,我将陆续整理自己在学习 Python 编程语言及其框架的过程中留下的笔记和代码,目的是掌握如何在生产环境中利用各种领域的第三方框架来快速开发应用程序.和大多 ...
- 备份Ubunut已安装的软件包并在新的Ubuntu 系统上恢复
0.查看已安装列表 dpkg -L xxxx.deb 1.备份 安装apt-clone: $sudo apt-get install apt-clone 提供一个保存备份文件的位置.我们在 /back ...
- 2023CCPC大学生程序设计竞赛-nhr
新生菜菜第一次参加这种大型比赛,还是有点紧张的,CCPC我们队就A了三题,铜牌.第一道,以为是签到,然后就交给clk了,我和crf看下一道过的题比较多的,然后感觉是一个滑动窗口,另一道题是纯数学公式. ...
- 2023年icpc大学生程序设计竞赛-crf
第一次在除郑轻以外的校外的地方比赛,也是第一次出市比赛,赛程也比较长.20号出发的时候遇到一些意外,不过无伤大雅,第一天热身赛平平无奇,晚上的时候补了一下前年icpc的题,一个多小时做了五题,很是自信 ...
- linux基础命令及常用命令总结
1.ls命令 ls命令是最基础的命令之一,作用是列出当前目录下所有的文件和目录.ls命令有很多选项可以使用,比较常用的是-l选项,可以以详细信息的形式列出所有文件和目录的信息. 示例:列出当前目录下的 ...
- SpringBoot整合WebService(实用版)
SpringBoot整合WebService 简介 WebService就是一种跨编程语言和跨操作系统平台的远程调用技术 此处就不赘述WebService相关概念和原理了,可以参考:https://b ...
- 一分钟学一个 Linux 命令 - rm
前言 大家好,我是 god23bin,欢迎回到咱们的<一分钟学一个 Linux 命令>系列,今天我要讲的是一个比较危险的命令,rm 命令,没错,你可以没听过 rm 命令,但是删库跑路你不可 ...