grunt里集成babel-grunt

来源：互联网发布：电子菜谱软件下载编辑：程序博客网时间：2024/04/29 18:59

最近这俩天在写个测试项目，使用grunt来进行转义和压缩。

就是通过es6来写js，通过less来写样式，但发布调用却不能直接调用es6的js和less，而是通过babel-grunt将es6转成es5，通过lessc将less文件转成css，然后再压缩成压缩文件供html界面调用。
grunt的配置文件内容如下

module.exports = function (grunt) {    var sassStyle = 'expanded';    grunt.initConfig({        pkg: grunt.file.readJSON('package.json'),        babel: {            options: {                sourceMap: false,                presets: ['babel-preset-es2015']            },            dist: {                files: [{                    expand: true,                    cwd: './goingOA/login/js/', //js目录下                    src: ['**/Login.js'], //所有js文件                    dest: './dest/'  //输出到此目录下                }]            }        },        less:{            page: {                options: {                    //配置项                    compress: true  //CSS 压缩                },                files: {                    //目标文件，将 page.less 文件编译压缩后，生成 page.css 文件                    './goingOA/login/css/Login.css' : './goingOA/login/less/Login.less'                }            }        },        concat: {            options: {                separator: '',                stripBanners: true            },            dist: {                src: ['./dest/Login.js'],                dest: './dest/LoginTemp.js'            },        },        uglify: {            compressjs: {                files: {                    './goingOA/login/js/Login.min.js': ['./dest/LoginTemp.js']                }            }        },        jshint: {            all: ['./dest/LoginTemp.js'],            options: {                globals: {                    document: false,                    window: false                }            }        }    });    grunt.loadNpmTasks('grunt-babel');    grunt.loadNpmTasks('grunt-contrib-less');    grunt.loadNpmTasks('grunt-contrib-concat');    grunt.loadNpmTasks('grunt-contrib-jshint');    grunt.loadNpmTasks('grunt-contrib-uglify');    grunt.registerTask('lessDev', ['less']);    grunt.registerTask('default', ['babel']);    grunt.registerTask('outputcss', ['sass']);    grunt.registerTask('concatjs', ['concat']);    grunt.registerTask('compressjs', ['babel', 'concat', 'jshint', 'uglify','less:page']);    grunt.registerTask('default');};

以为一切ok，执行时，始终在jshint代码检查的地方过不去，错误内容如下：

Running "jshint:all" (jshint) task   ./dest/LoginTemp.js      1 |"use strict";         ^ Use the function form of "use strict".     13 |var vueObj = new Vue({                          ^ 'Vue' is not defined.     17 |        loginBtnLabel: i18nMap.get("loginBtnLabel"), //登登录录按按钮钮的的label                                ^ 'i18nMap' is not defined.     18 |        findPswLabel: i18nMap.get("findPswLabel"), //找找回回密密码码的的label                               ^ 'i18nMap' is not defined.     19 |        i18nSelLabel: i18nMap.get("i18nSelLabel"), //选选则则语语言言的的label                               ^ 'i18nMap' is not defined.     20 |        loginInfo: i18nMap.get("loginInfo"), //信信息息展展示示的的label                            ^ 'i18nMap' is not defined.     32 |                var curTime = setTimeout(function () {                                       ^ 'setTimeout' is not defined.

打开代码发现就是js头上多了”use strict”造成的。

然后就是到处找度娘，最终才搞定，就是在.babelrc文件中需要添加一个插件。
修改前

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

修改后

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

注明了插件当然要安装插件咯

cnpm install babel-plugin-transform-remove-strict-mode && yarn add babel-plugin-transform-remove-strict-mode

这下就ok了，大功告成。

阅读全文

0 0