非webpack、cli环境下，babel解析es6代码转为es5，以及grunt中配置babel

末蓝、 2023-07-21 05:26 14阅读 0赞

## 非webpack、cli环境下，babel解析es6代码转为es5 ##

在非webpack、cli环境下，引入es6代码，如果不注意直接发布生产，在部分低版本浏览器（IE）或手机（如iphone6P系统版本ios10以下的）会报错。这时，需要通过babel解析，将es6代码转为es5才可以正常运行。  
**第一步**  
新建目录，命令行输入npm init 对项目进行初始化，生成package.json配置文件  
**第二步**  
在根目录下新建一个用于babel编译.babelrc文件

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

**第三步**  
安装ES2015转码规则

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

ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个

$ npm install --save-dev babel-preset-stage-0
    $ npm install --save-dev babel-preset-stage-1
    $ npm install --save-dev babel-preset-stage-2
    $ npm install --save-dev babel-preset-stage-3

**第四步**  
生成编译后的js文件  
这儿需要指定生成的js文件，不然会在命令行里打印出来

babel es6.js -o es5.js

**注意**  
babel编译后的js为严格模式，代码不规范浏览器编译会报错，删除文件开头的’use strict’;即可。

## grunt中配置babel ##

下载相关插件

npm install grunt-babel --save-dev
    npm install babel-preset-es2015 --save-dev
    npm install babel-plugin-transform-remove-strict-mode --save-dev

Gruntfile.js中配置  
配置

babel: {
        options: {
            sourceMap: false,
            presets: ['babel-preset-es2015']
        },
        dist: {
            files: [{
                expand : true,
    			cwd : './js',//js目录下
    			src : [ '**/*.js'],//所有js文件
    			dest : 'build/sit/zyb/js' //输出到此目录下
            }]
        }
    }

加载插件

grunt.loadNpmTasks('grunt-babel');

加入任务列表

grunt.registerTask('default', [ 'babel' ]);

在根目录加入.babelrc文件，告知babel解析为es2015格式，并清除编译完成之后文件顶部的use strict。

{
      presets: [
          [ "es2015", { "modules": false } ]
      ],
      "plugins": ["transform-remove-strict-mode"]
    }