gulp-babel,es6转es5

npm install --save-dev gulp-babel
npm install --save-dev babel-preset-es2015
var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("default", function () {
  return gulp.src("webRoot/src/**/*.js")// ES6 源码存放的路径
    .pipe(babel())
    .pipe(gulp.dest("webRoot/dist")); //转换成 ES5 存放的路径
});

  在项目根路径创建文件 .babelrc。内容为

{
  "presets": ["es2015"]
}

  就在刚刚安装好了以后,发现除了一个错误

不知啥时候,他必须要配合这个东西才能用,于是我有npm install --save-dev babel-core就好了。

还有那个gulp配置的地方,地址要加上根目录不然也会报错。

时间: 2024-11-02 16:18:45

gulp-babel,es6转es5的相关文章

babel es6 转 es5

1.创建package.json npm init -y 2.安装所需要的包 npm install  -D @babel/core @babel/cli @babel/preset-env 3.在 根目录下创建文件 .babelrc 文件内容 { "presets":["@babel/preset-env"] } 4.创建src目录 创建js文件 5.运行命令 将 src下的js文件 编译转码 到 如:lib目录 运行:.\node_modules\.lib\ba

ES6转ES5:Gulp+Babel

目标: ES6代码转成ES5 对转换后的ES5进行压缩 以上步骤自动监控执行 步骤: 1.安装插件 在命令行中定位到项目根目录 安装全局 Gulp npm install -g gulp 安装项目中使用的 Gulp npm install --save-dev gulp 安装 Gulp 上 Babel 的插件 npm install --save-dev gulp-babel 安装 Babel 上将 ES6 转换成 ES5 的插件 npm install --save-dev babel-pre

Babel 转码器 § es6转换es5

Babel 转码器 § es6转换es5 实时转码 /  Repl  -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc 1.Babel 的配置文件是.babelrc,存放在项目的根目录下.使用 Babel 的第一步,就是配置这个文件. 该文件用来设置转码规则和插件,基本格式如下. { "presets": [], "plugins": [] } 2.presets字段设定转码规则,官方

使用gulp搭建es6运行环境

es6引入很多新的语法特性,但是想要在现有浏览器环境执行,需要将ES6代码转为ES5代码,网上有很多转码器babel,traceur之类的,参考之后,使用traceur和gulp搭建es6运行环境,开始我的es6. 开始安装 首先确保电脑上安装了nodejs.1.创建一个项目目录2.全局安装Traceur,在控制台输入npm install -g traceur3.打开项目目录,安装gulp以及gulp-traceur插件npm install -g gulpnpm install gulp g

组件封装:es6转es5

1.先全局安装babel-cli,输入命令 npm install babel-cli -g 2.输入 cd d:\es6 ; ---进入文件夹路径 3.输入 npm init: 一路回车键 ---(引导你创建一个package.json文件,包括名称.版本.作者这些信息等) 4.输入 npm install --save-dev babel-cli: ---(安装命令行转码babel-cli工具) 5.es6文件里新建配置文件.babelrc 复制代码 { "presets": []

es6转es5

一.在没有IDE情况下的转换 在"我的电脑->D盘”新建个文件夹es6,文件夹里新建一个文件es6.js. 打开命令行窗口 1.先全局安装babel-cli,输入命令 npm install babel-cli -g 2.输入 cd d:\es6 ; ---进入文件夹路径 3.输入 npm init: 一路回车键 ---(引导你创建一个package.json文件,包括名称.版本.作者这些信息等) 4.输入 npm install --save-dev babel-cli: ---(安装命

Gulp Babel AMD转换例子

1.gulpfile.js var gulp = require('gulp'); const babel = require('gulp-babel'); gulp.task('default', () => { return gulp.src('src/**/*.js') .pipe(babel({ presets: ['es2015'], plugins:['babel-plugin-transform-es2015-modules-amd'] })) .pipe(gulp.dest('d

ECMAScript6转码器,ES6转ES5

现在越来越多的前端开始关注ES6,也有一部分人开始用ECMAScript 6,但是ES6的一些新的特性并不被低版本的浏览器支持. 所以这次就分享一个ES6转ES5的方法. 一.首先建立一个文件夹,然后里面创建.babelrc文件 有时候这个文件创建不了的,可以从别处复制过来 .babelrc文件的内容填写如下: {"presets": [],"plugins": []}.babelrc的后期修改需要手动填写. 二.npm init来初始化项目(一路回车就可以有yes

webpack实现es6转es5

Webpack实现es6转换为es5 安装插件 npm install --save-dev babel-loader @babel/core @babel/preset-env 配置 在webpack.config.js中的module的rules中,添加一条新的loader { test: /\.js/, //babel转化es6到es5 exclude: /node_modules/, use: { loader: "babel-loader", options: { prese

webpack+babel+ES6+react环境搭建

webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录  react  这个名字自定义,然后进入到这个目录下面 mkdir app //创建app目录 用来存放项目源文件 mkdir dist // 创建dist目录 用来存放打包好的文件 touch .gitignore //创建.gitignore 用来添加git 忽略的文件 touch webpack.config.js //创建webpack的配置文件 cd app //进入到app目