ES6-Babel-Browserify使用教程

  1. 定义package.json文件

    {
    "name" : "es6-babel-browserify",
    "version" : "1.0.0"
    }
  2. 安装babel-cli, babel-preset-es2015和browserify

    • npm install babel-cli browserify -g

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

    • preset 预设(将es6转换成es5的所有插件打包)

  3. 定义.babelrc文件

    {
    "presets": ["es2015"]
    }
  4. 编码

    • 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);
  5. 编译

    • 使用Babel将ES6编译为ES5代码(但包含CommonJS语法) : babel js/src -d js/lib

    • 使用Browserify编译js : browserify js/lib/app.js -o js/lib/bundle.js

  6. 页面中引入测试

    <script type="text/javascript" src="js/lib/bundle.js"></script>
  7. 引入第三方模块(jQuery)1). 下载jQuery模块:

    • npm install jquery@1 --save2). 在app.js中引入并使用

ES6-Babel-Browserify使用教程的更多相关文章

  1. 在浏览器端用es6,babel+browserify打包

    写得最清楚的是这个系列: 一个普通的写网页的人如何过渡到ES6 (一) 感觉比babel官网写得还清楚点. 看完这个才有点理解node原来不只是用来起express后端web server,更主要用途 ...

  2. 在webstrorm中配置好es6 babel

    第一步,新建一个项目,我这里建立了基于express 的node项目 第二步:将JavaScript语言版本切换为ECMAScript6 点击File —>settings,弹出设置框.把js的 ...

  3. gulp + es6 + babel+ angular 搭建环境并实现简单的路由

    1.ECMAscript 6的语法糖面临的唯一问题就是浏览器兼容的问题,使得很多程序员望而怯步. 2.babel的作用就是将es6的语法编译成es5被浏览器所识别.这样就可以任性的使用es6了. 3. ...

  4. es6 babel编译

    本文主要参照阮一峰的es6入门,为提高自己写了一份随笔. 原文地址请戳这里  ECMAScript 6 入门 ECMAScript 6是JavaScript语言的下一代标准.因为当前版本的ES6是在2 ...

  5. ES6 Babel 简单使用

    ECMAScript 是 JS 的语言标准.而 ES6 是新的 JS 语法标准. PS:严格来说,ECMAScript 还包括其他很多语言的语言标准. ECMAScript 发展历史 1995年:EC ...

  6. ES6 - Babel编译环境搭建

    都看到这里了,我就不写什么node环境安装之类的了. 直接从新建项目文件夹后开始吧! 安装依赖: 命令行cd到项目文件夹之后,执行以下命令:(mac记得前边加sudo) npm init –y  // ...

  7. es6 ---- babel

    babel-polyfill是ES6的补丁,由于babel只支持ES6语法部分的编译,对于新增的类我们还需要安装额外的polyfill,虽然现在Chrome和Firefox都已经添加了Promise等 ...

  8. 在webstrorm中配置好es6 babel【更新:在webstorm中配置.vue和.vue文件中支持es6】

    第一步:全局安装babel-cli npm install -g babel-cli 第二步,新建一个空项目,在 WebStorm 中的当前项目中打开 Terminal,进入项目的根目录下, 安装 E ...

  9. es6 babel 安装以及使用

    1,安装好node(需要使用npm包管理工具) 2,在本地项目路径下npm init,格式化成功后会在项目下生成一个配置文件package.json 3,本地安装bable npm install - ...

  10. 珠峰 - 郭永峰react课程 node es6 babel学习笔记

    npm install babel-cli -g //安装babel babel index.js -o a.js //等同于 babel index.js --out-file a.js 复制ind ...

随机推荐

  1. Linux学习历程——Centos 7 账户管理命令(用户篇)useradd usermod userdel

    一.命令介绍 useradd     用于创建新的用户 usermod    用于修改用户属性 userdel      用于删除用户 -------------------------------- ...

  2. 随机IP

    function rand_ip(){ $ip_longs = array( array('607649792', '608174079'),        //36.56.0.0-36.63.255 ...

  3. SAM failed to write changes to the database 问题处理

    问题: Windows Storage Server 2012 R2 发布NAS服务,客户创建用户和组时报错,事件查看器系统日志下报错Event ID 12288,内容如下: SAM failed t ...

  4. linux的常用命令介绍

    1.ls  列出当前目录下的所有的文件和文件夹的名称. 参数如下:-a 显示隐藏文件 -l 显示方式为列表 -h 以可读性高的方式输出 eg: ls -lh /logs/tran  目录如果不指定(相 ...

  5. python崩溃到现在居然还没有放弃的Day07

    今天新入一个全新的知识面,叫做深浅拷贝,拷贝英文名copy,俗称复制,作为一个火影迷就会想到拷贝忍者旗木卡卡西,跑题了,在所有的数据存储时,都会有内存地址和存储地址,浅拷贝只拷贝第一层的内存地址,深拷 ...

  6. P1177 【模板】快速排序 题解

    本质为sort,这里我们用优先队列(堆)解决. 什么是堆? 堆 堆是一个完全二叉树,而且是每层都有规律的二叉树 规律大概是: 小根堆:最上层数的大小最小,往下每层结点都比父亲结点大,比两个儿子结点小 ...

  7. js创建对象,放进js集合

    var list=[]; for (var i=0;i<nodes.length;i++){ if(nodes[i].type=='user'){ person=new Object(); pe ...

  8. form单选框

    form中的单选框: var resultStartRadio = new Ext.form.RadioGroup({ id : 'resultStartRadio', name :"for ...

  9. Tutorial 03_分布式数据库HBASE

    (一)编程实现一下内容,并用Hadoop提供的Shell命令完成相同任务: 编程实现: (1)列出HBase所有表的相关信息,例如表名; package tutorial01; import java ...

  10. Centos6.5 pppoe-server

    [root@localhost network-scripts]# rpm -q rp-pppoepackage rp-pppoe is not installed ----------------- ...