zoukankan      html  css  js  c++  java
  • gulp+babel 实时转es6

    1.安装gulp
      npm install gulp

    2.得到package.json文件
      npm init

    2.全局安装Babel。
     npm install -g babel-cli  
      npm install -g babel-cli --save-dev  

    3.Babel的配置文件是.babelrc ,windows下新建该文件会提示必须键入文件名,解决办法是文件名如下.babelrc.

    4.ES2015转码规则
      npm install --save-dev babel-preset-es2015

    5.将规则加入到.babelrc文件中    
        {  
            "presets": [  
              "es2015" 
            ],  
            "plugins": []  
          }  

    6.配置工具

      6.1 安装gulp-babel
          npm install --save-dev gulp-babel
      
      6.2 配置gulpfile.js文件

          var gulp = require("gulp");  
          var babel = require("gulp-babel");  
          
          gulp.task("default", function () {  
            return gulp.src("src/a.js")  
              .pipe(babel())  
              .pipe(gulp.dest("lib"));  
          }); 

      6.3实时转码
         安装gulp-watch
         npm install --save-dev gulp-watch

         配置gulpfile文件
         var gulp = require("gulp"),  
              babel = require("gulp-babel"), 
             watch = require("gulp-watch");  
          
         gulp.task("babeljs", function () {  
           return gulp.src("www/js/*.js")  
             .pipe(babel())  
             .pipe(gulp.dest("dist/js"));  
         });  
         gulp.task("watch",function(){
            gulp.watch('www/js/*.js',['babeljs']);
         })

         gulp.task('default',['watch','babeljs']);

     7.配置完成,运行实现转码
       gulp

  • 相关阅读:
    Auto.js 入门教程
    几乎纯css实现弹出框
    php curl访问https 域名接口一直报错的问题
    金山打字通刷打字速度脚本
    centos 安装 图像识别工具 tesseract-ocr 流程
    js 实现俄罗斯方块(三)
    小程序报错 .wxss 无法找到
    Redis存储数组
    问题记录-databinding/hilt踩坑记录
    问题记录-CoordinatorLayout+WebView使用遇到的问题
  • 原文地址:https://www.cnblogs.com/echolife/p/8658364.html
Copyright © 2011-2022 走看看