babel+gulp實時轉碼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-babel

     配置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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM