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. transform 的副作用

    transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效果. 变形transform可以实现2D和3D两种效果. 变形transf ...

  2. Python数据描述与分析

    在进行数据分析之前,我们需要做的事情是对数据有初步的了解,比如对数据本身的敏感程度,通俗来说就是对数据的分布有大概的理解,此时我们需要工具进行数据的描述,观测数据的形状等:而后才是对数据进行建模分析, ...

  3. 从零开始搭建服务器部署web项目

    前言 该教程旨在完整描述建站过程,会将博主踩过的坑尽量详细的罗列出来.整个建站流程相对较为庞大,因此做了分解,同时适合大家有针对性的查询感兴趣的部分. 一.如何拥有自己的云服务器. 二.域名的购买与解 ...

  4. js坚持不懈之16:使用js向HTML元素分配事件

    向 button 元素分配 onclick 事件: <!DOCTYPE html> <html> <body> <p>点击按钮就可以执行 <em& ...

  5. 如何自己制作CHM电子书?

    软件介绍: EasyCHM 非常适合个人和单位制作高压缩比的有目录.索引,同时具有全文检索及高亮显示搜索结果的网页集锦.CHM格式的帮助文件.专业的产品说明书.公司介绍.文章集锦.CHM电子书等等. ...

  6. 芒果绿的blog

    --------------------------------------------------------------这是芒果绿的blog!!-------------------------- ...

  7. Linux使用IDEA配置maven的web项目骨架archetype(模板) 自定义骨架

    说明:本文说的骨架就是 archetype,也可以理解为模板,总是就是指你创建项目时的基本配置. 前言:在使用IDEA创建maven的web项目时,一般都是直接使用提供的默认web项目,如图 然而创建 ...

  8. git 添加、提交、推送

    只添加本地修改的一个文件 如,只添加package.json一个文件 git add package.json git commit -m "修改qa环境版本号" git push ...

  9. day 23 面向对象二

    复习 '''1.面向过程与面向对象   过程:程序流程化,可拓展性差   对象:程序流程多样化,可拓展性强​   变量 | 函数 => 属性 | 方法:前者直接使用,通过所属者.语法调用​2.拥 ...

  10. 第二章 Python基本图形绘制

    2.1 深入理解Python语言 Python语言是通用语言 Python语言是脚本语言 Python语言是开源语言 Python语言是跨平台语言 Python语言是多模型语言 Python的特点与优 ...