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 ...
随机推荐
- transform 的副作用
transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效果. 变形transform可以实现2D和3D两种效果. 变形transf ...
- Python数据描述与分析
在进行数据分析之前,我们需要做的事情是对数据有初步的了解,比如对数据本身的敏感程度,通俗来说就是对数据的分布有大概的理解,此时我们需要工具进行数据的描述,观测数据的形状等:而后才是对数据进行建模分析, ...
- 从零开始搭建服务器部署web项目
前言 该教程旨在完整描述建站过程,会将博主踩过的坑尽量详细的罗列出来.整个建站流程相对较为庞大,因此做了分解,同时适合大家有针对性的查询感兴趣的部分. 一.如何拥有自己的云服务器. 二.域名的购买与解 ...
- js坚持不懈之16:使用js向HTML元素分配事件
向 button 元素分配 onclick 事件: <!DOCTYPE html> <html> <body> <p>点击按钮就可以执行 <em& ...
- 如何自己制作CHM电子书?
软件介绍: EasyCHM 非常适合个人和单位制作高压缩比的有目录.索引,同时具有全文检索及高亮显示搜索结果的网页集锦.CHM格式的帮助文件.专业的产品说明书.公司介绍.文章集锦.CHM电子书等等. ...
- 芒果绿的blog
--------------------------------------------------------------这是芒果绿的blog!!-------------------------- ...
- Linux使用IDEA配置maven的web项目骨架archetype(模板) 自定义骨架
说明:本文说的骨架就是 archetype,也可以理解为模板,总是就是指你创建项目时的基本配置. 前言:在使用IDEA创建maven的web项目时,一般都是直接使用提供的默认web项目,如图 然而创建 ...
- git 添加、提交、推送
只添加本地修改的一个文件 如,只添加package.json一个文件 git add package.json git commit -m "修改qa环境版本号" git push ...
- day 23 面向对象二
复习 '''1.面向过程与面向对象 过程:程序流程化,可拓展性差 对象:程序流程多样化,可拓展性强 变量 | 函数 => 属性 | 方法:前者直接使用,通过所属者.语法调用2.拥 ...
- 第二章 Python基本图形绘制
2.1 深入理解Python语言 Python语言是通用语言 Python语言是脚本语言 Python语言是开源语言 Python语言是跨平台语言 Python语言是多模型语言 Python的特点与优 ...