es6转es5

2017-09-15  本文已影响35人  5df463a52098

平常写代码时用到es6,但是一些手机不能识别es6的js写法,比如反引号,需要转化成es5的js。
方法一:用gulp
1.npm init 生成package.json文件,在根目录下创建gulpfile.js文件,根目录下安装gulp(npm install gulp)
2.修改gulpfile.js中导入文件的路径以及导出文件的路径
3.安装依赖(npm install),生成node_modules文件夹
4.命令行执行gulp,就能生成编译后的js文件,删掉node_modules就ok了。转码完成,引入文件就行了
注意:下次修改js内容后,要重新安装依赖,生成node_modules文件,再运行gulp(换言之,就是再次执行第三和第四步)

gulpfile.js

var gulp = require('gulp');
var babel = require('gulp-babel');
var autoprefix = require('gulp-autoprefixer');//给css加浏览器前缀,增强兼容性
//转es6-es5
gulp.task('js',function () {
    gulp.src(['./assets/js/*.js'])  //导入文件路径
        /*.pipe(babel({
            presets: ['es2015']
        }))*/
        .pipe(babel()) 
        .pipe(gulp.dest('./assets/build/js')) //导出文件路径
});
//处理css前缀
/*gulp.task('css',function(){
  gulp.src('./assets/css/*.css')
      .pipe(autoprefix('last 2 versions'))
    .pipe(gulp.dest('./assets/build/css'));
})*/

//统一执行任务
gulp.task('default',['js'],function () {
    // 监听js文件
    gulp.watch('./assets/js/*.js', function() {
        gulp.run('js');
    });
    // 监听css文件
    /*gulp.watch('./assets/css/*.css', function() {
        gulp.run('css');
    });*/
});

方法二:用babel
1.npm init 生成package.json文件,在根目录下创建.babelrc文件,
2.全局安装babel(npm install --global babel-cli)
3.安装转码规则(npm install --save-dev babel-preset-es2015)生成node_modules文件,
4.命令行输入babel js/map.js --out-file js/compiled.js转码完成,删掉node_modules文件,引入文件就行了。
注意:下次修改js内容后,要重新安装转码规则,生成node_modules文件,再输入转码命令(换言之,就是再次执行第三和第四步)

.babelrc

{  
        "presets": [  
          "es2015" 
        ],  
        "plugins": []  
      } 
上一篇 下一篇

猜你喜欢

热点阅读