ES6-Babel-Browserify使用教程
ES6-Babel-Browserify使用教程
定义package.json文件
{
"name" : "es6-babel-browserify",
"version" : "1.0.0"
}安装babel-cli, babel-preset-es2015和browserify
npm install babel-cli browserify -g
npm install babel-preset-es2015 --save-dev
preset 预设(将es6转换成es5的所有插件打包)
定义.babelrc文件
{
"presets": ["es2015"]
}编码
js/src/module1.js 分别暴露
export function foo() {
console.log('module1 foo()');
}
export function bar() {
console.log('module1 bar()');
}
export const DATA_ARR = [1, 3, 5, 1]js/src/module2.js 统一暴露
let data = 'module2 data'
function fun1() {
console.log('module2 fun1() ' + data);
}
function fun2() {
console.log('module2 fun2() ' + data);
}
export {fun1, fun2}js/src/module3.js
export default {
name: 'Tom',
setName: function (name) {
this.name = name
}
}js/src/app.js
import {foo, bar} from './module1'
import {DATA_ARR} from './module1'
import {fun1, fun2} from './module2'
import person from './module3'
import $ from 'jquery'
$('body').css('background', 'red')
foo()
bar()
console.log(DATA_ARR);
fun1()
fun2()
person.setName('JACK')
console.log(person.name);
编译
使用Babel将ES6编译为ES5代码(但包含CommonJS语法) : babel js/src -d js/lib
使用Browserify编译js : browserify js/lib/app.js -o js/lib/bundle.js
页面中引入测试
<script type="text/javascript" src="js/lib/bundle.js"></script>
引入第三方模块(jQuery)1). 下载jQuery模块:
npm install jquery@1 --save2). 在app.js中引入并使用
ES6-Babel-Browserify使用教程的更多相关文章
- 在浏览器端用es6,babel+browserify打包
写得最清楚的是这个系列: 一个普通的写网页的人如何过渡到ES6 (一) 感觉比babel官网写得还清楚点. 看完这个才有点理解node原来不只是用来起express后端web server,更主要用途 ...
- 在webstrorm中配置好es6 babel
第一步,新建一个项目,我这里建立了基于express 的node项目 第二步:将JavaScript语言版本切换为ECMAScript6 点击File —>settings,弹出设置框.把js的 ...
- gulp + es6 + babel+ angular 搭建环境并实现简单的路由
1.ECMAscript 6的语法糖面临的唯一问题就是浏览器兼容的问题,使得很多程序员望而怯步. 2.babel的作用就是将es6的语法编译成es5被浏览器所识别.这样就可以任性的使用es6了. 3. ...
- es6 babel编译
本文主要参照阮一峰的es6入门,为提高自己写了一份随笔. 原文地址请戳这里 ECMAScript 6 入门 ECMAScript 6是JavaScript语言的下一代标准.因为当前版本的ES6是在2 ...
- ES6 Babel 简单使用
ECMAScript 是 JS 的语言标准.而 ES6 是新的 JS 语法标准. PS:严格来说,ECMAScript 还包括其他很多语言的语言标准. ECMAScript 发展历史 1995年:EC ...
- ES6 - Babel编译环境搭建
都看到这里了,我就不写什么node环境安装之类的了. 直接从新建项目文件夹后开始吧! 安装依赖: 命令行cd到项目文件夹之后,执行以下命令:(mac记得前边加sudo) npm init –y // ...
- es6 ---- babel
babel-polyfill是ES6的补丁,由于babel只支持ES6语法部分的编译,对于新增的类我们还需要安装额外的polyfill,虽然现在Chrome和Firefox都已经添加了Promise等 ...
- 在webstrorm中配置好es6 babel【更新:在webstorm中配置.vue和.vue文件中支持es6】
第一步:全局安装babel-cli npm install -g babel-cli 第二步,新建一个空项目,在 WebStorm 中的当前项目中打开 Terminal,进入项目的根目录下, 安装 E ...
- es6 babel 安装以及使用
1,安装好node(需要使用npm包管理工具) 2,在本地项目路径下npm init,格式化成功后会在项目下生成一个配置文件package.json 3,本地安装bable npm install - ...
- 珠峰 - 郭永峰react课程 node es6 babel学习笔记
npm install babel-cli -g //安装babel babel index.js -o a.js //等同于 babel index.js --out-file a.js 复制ind ...
随机推荐
- Linux学习历程——Centos 7 账户管理命令(用户篇)useradd usermod userdel
一.命令介绍 useradd 用于创建新的用户 usermod 用于修改用户属性 userdel 用于删除用户 -------------------------------- ...
- 随机IP
function rand_ip(){ $ip_longs = array( array('607649792', '608174079'), //36.56.0.0-36.63.255 ...
- SAM failed to write changes to the database 问题处理
问题: Windows Storage Server 2012 R2 发布NAS服务,客户创建用户和组时报错,事件查看器系统日志下报错Event ID 12288,内容如下: SAM failed t ...
- linux的常用命令介绍
1.ls 列出当前目录下的所有的文件和文件夹的名称. 参数如下:-a 显示隐藏文件 -l 显示方式为列表 -h 以可读性高的方式输出 eg: ls -lh /logs/tran 目录如果不指定(相 ...
- python崩溃到现在居然还没有放弃的Day07
今天新入一个全新的知识面,叫做深浅拷贝,拷贝英文名copy,俗称复制,作为一个火影迷就会想到拷贝忍者旗木卡卡西,跑题了,在所有的数据存储时,都会有内存地址和存储地址,浅拷贝只拷贝第一层的内存地址,深拷 ...
- P1177 【模板】快速排序 题解
本质为sort,这里我们用优先队列(堆)解决. 什么是堆? 堆 堆是一个完全二叉树,而且是每层都有规律的二叉树 规律大概是: 小根堆:最上层数的大小最小,往下每层结点都比父亲结点大,比两个儿子结点小 ...
- js创建对象,放进js集合
var list=[]; for (var i=0;i<nodes.length;i++){ if(nodes[i].type=='user'){ person=new Object(); pe ...
- form单选框
form中的单选框: var resultStartRadio = new Ext.form.RadioGroup({ id : 'resultStartRadio', name :"for ...
- Tutorial 03_分布式数据库HBASE
(一)编程实现一下内容,并用Hadoop提供的Shell命令完成相同任务: 编程实现: (1)列出HBase所有表的相关信息,例如表名; package tutorial01; import java ...
- Centos6.5 pppoe-server
[root@localhost network-scripts]# rpm -q rp-pppoepackage rp-pppoe is not installed ----------------- ...