babel基本使用详解

什么是babel?

babel是一个强大的多用途js编译器 点击进入官网

安装babel

npm install -g babel-cli
npm install --save-dev babel-cli

babel配置文件

通过.babelrc来表示

{
 "presets" : [ ],
 "plugins" : [ ]
}

presets用来存放一些预设

plugins用来存放一些插件

命令行的简单使用

我们可以通过 -o (--out-file) 参数来编译一个文件

babel es6.js -o es5.js / babel es6 --out-file es5.js

如果我们想编译整个目录 -d (--out-dir)参数

babel  src -d build / babel  src --out-dir build

预设

现在有一段es6的代码,我们想要使用babel来编译这段代码, 目前来说通过编译后的代码几乎是原封不动的复制了过来

es6.js

var add = (a,b) =>{
 console.log(a+b)
}
add(1,2)

我们可以安装babel-preset-es2015来解析es2015的语法

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

然后通过配置.babelrc文件

{
 "presets": ["es2015"]
}

这样我们就可以进行对es2015语法解析了。最后通过配置package.json的scripts

"scripts": {
 "build" : "babel src -d build -w"
 }

接下来直接在命令行

npm run build

插件

在babel中有很多很多的插件, 例如我们要将下面一段代码转换成umd的形式,该如何做呢?

var add = (a,b) =>{
 console.log(a+b)
}
add(1,2)

首先找到对应的插件babel-plugin-transform-es2015-modules-umd,安装该插件

npm install --save-dev babel-plugin-transform-es2015-modules-umd

在配置中引入

{
 "presets":["es2015"],
 "plugins":["transform-es2015-modules-umd"]
}

然后编译后就是我们想要的了

(function (global, factory) {
 if (typeof define === "function" && define.amd) {
 define(["module", "exports"], factory);
 } else if (typeof exports !== "undefined") {
 factory(module, exports);
 } else {
 var mod = {
  exports: {}
 };
 factory(mod, mod.exports);
 global.sum = mod.exports;
 }
})(this, function (module, exports) {
 "use strict";
 Object.defineProperty(exports, "__esModule", {
 value: true
 });
 var sum = function sum(a, b) {
 return a + b;
 };
 exports.default = sum;
 module.exports = exports["default"];
});

集成gulp

babel可以单独使用, 也可以配合构建工具(gulp webpack等)进行结合

首先要下载gulp 和gulp对应的babel插件

npm install gulp gulp-babel --save-dev

创建gulp配置gulpfile.js

const gulp = require('gulp')
const babel = require('gulp-babel')
gulp.task('babel', ()=>{
 return gulp.src('src/**/*.js')
  .pipe(babel())
  .pipe(gulp.dest('dist'))
})
gulp.task('default' , ['babel'])

配置下package.json中的scripts

"scripts": {
 "dev" : "./node_modules/.bin/gulp"
 }

最后执行命令

npm run dev

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

(0)

相关推荐

  • ES6通过babel转码使用webpack使用import关键字

    使用了babel转码,使用import和export的时候,在浏览器运行代码的时候,提示 Uncaught ReferenceError: require is not defined babel只是个翻译,假设a.js 里 import 了 b.js 对a.js进行转码,只是翻译了a.js,并不会把b.js的内容给读取合并进来 如果想在最终的某一个js里,包含 a.js,b.js 的代码,那就需要用到打包工具 也就是webpack等工具了 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • JavaScript中ES6 Babel正确安装过程

    本文介绍Babel6.x的安装过程~首先呢,可以使用Babel在线转换 https://babeljs.io/repl/ 然后进入主题:安装Babel(命令行环境,针对Babel6.x版本) 1.首先安装babel-cli(用于在终端使用babel) npm install -g babel-cli 2.然后安装babel-preset-es2015插件 npm install --save babel-preset-es2015 注:Babel5版本默认包含各种转换插件,然而Babel6.x相

  • babel基本使用详解

    什么是babel? babel是一个强大的多用途js编译器 点击进入官网 安装babel npm install -g babel-cli npm install --save-dev babel-cli babel配置文件 通过.babelrc来表示 { "presets" : [ ], "plugins" : [ ] } presets用来存放一些预设 plugins用来存放一些插件 命令行的简单使用 我们可以通过 -o (--out-file) 参数来编译一个

  • 细说webpack6 Babel的使用详解

    在 webpack 中编写 JavaScript 代码,可以使用最新的 ES 语法,而最终打包的时候,webpack 会借助 Babel 将 ES6+语法转换成在目标浏览器可执行 ES5 语法.所以 Babel 是一个重要的知识点需要掌握. 什么是 Babel Babel 是 JavaScript 的编译器,通过 Babel 可以将我们写的最新 ES 语法的代码轻松转换成任意版本的 JavaScript 语法.随着浏览器逐步支持 ES 标准,我们不需要改变代码,只需要修改 Babel 配置即可以

  • WebStorm ES6 语法支持设置&babel使用及自动编译(详解)

    一.语法支持设置 Preferences > Languages & Frameworks > JavaScript 二.Babel安装 1.全局安装 npm install -g babel-cli 2.当前项目,适用于使用不同babel版本的情况 npm install --save-dev babel-cli 三.Babel基本用法 # 转码结果输出到标准输出 babel example.js # 转码结果写入一个文件 # --out-file 或 -o 参数指定输出文件 bab

  • 详解Webpack+Babel+React开发环境的搭建的方法步骤

    1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等)作为模块进行编译后进行打包. 2.安装Webpack 要开始使用Webpack在项目中进行开发前我们首先需要在全局环境中进行安装. npm install webpack -g 3.创建一个项目 安装好后创建一个名叫learn-webpack的项目并进入该项目文件夹,当然项目名字你可以起你自己想要的

  • 详解webpack babel的配置

    Babel是什么 Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到: 使用下一代的javascript(ES6,ES7,--)代码,即使当前浏览器没有完成支持: 使用基于JavvScript进行扩展语言,比如React的JSX: npm i babel-core babel-preset-env babel-loader babel-plugin-transform-runtime babel-preset-stage-2 -D 关于babel的使用 首先

  • 详解如何用babel转换es6的class语法

    babel是一个转码器,目前开发react.vue项目都要使用到它.它可以把es6+的语法转换为es5,也可以转换JSX等语法. 我们在项目中都是通过配置插件和预设(多个插件的集合)来转换特定代码,例如env.stage-0等. 实际上babel可以通过自定义插件的方式实现任何代码的转换,接下来我们通过一个"把es6的 class 转换为es5"的例子来了解一下babel. 内容如下: webpack环境配置 大家应该都配置过babel-core这个loader,它的作用是提供babe

  • vue-cli中的babel配置文件.babelrc实例详解

    本文介绍vue-cli脚手架工具根目录的babelrc配置文件 介绍 es6特性浏览器还没有全部支持,但是使用es6是大势所趋,所以babel应运而生,用来将es6代码转换成浏览器能够识别的代码 babel有提供专门的命令行工具方便转码,可以自行去了解 vue-cli脚手架的.babelrc文件 { // 此项指明,转码的规则 "presets": [ // env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es7,es8进行转码,并且设置amd

  • Node.js基础模块babel使用详解

    目录 安装配置 使用babel 实际例子 类的转化 babel-polyfill 前言: 由于ES6到ES7增加了很多新的语法,新特性的出现使得大家都希望通过新语法来提升自身的开发效率,但在之前的最新的node可能也没有百分之百的支持ES2017的新特性,而且开发者在开发环境和生产环境中的版本一般是不同的,所以新特性的代码可能不能完美的运行在线上环境中,为了解决难题,babel提供一系列的api来将新特性的语法转化成低版本环境中能够运行的代码 安装配置 babel是由一系列的组件构成,所以我们在

  • Babel 插件开发&访问节点实例详解

    目录 访问节点 获取子节点的Path: 检查节点的类型: 检查路径(Path)类型: 检查标识符(Identifier)是否被引用: 找到特定的父路径: 获取同级路径: 停止遍历: 访问节点 获取子节点的Path: 我们在处理节点的属性之前必须要拿到节点对象才能进行操作,我们使用path.node.property来访问属性~ BinaryExpression(path) { path.node.left; path.node.right; path.node.operator; } 我们还可以

  • Babel自动生成Attribute文档实现详解

    目录 1. 前言 2. 开发自动生成属性文档插件 2.1 生成Babel插件模板: 2.2 转换思路详解: 2.3 单元测试用例: 2.4 AST分析详解: 2.5 插件开发过程: 2.5.1 定义Comment.ApiTable类型对象: 2.5.2 插件主逻辑分析: 2.5.3 主逻辑实现: 2.5.4 注释解析函数: 2.5.5 Markdown表格拼装: 2.5.6生成结果展示~ 3. 总结 1. 前言 利用Babel自动解析源码属性上的注释生成对应Markdown文档,这个场景的应用主

随机推荐