[grunt] grunt 配置babel es6转码

最新推荐文章于 2024-09-09 09:51:29 发布

haliofwu

最新推荐文章于 2024-09-09 09:51:29 发布

阅读量3.1k

点赞数

分类专栏：构建工具文章标签： grunt babel es6

本文链接：https://blog.youkuaiyun.com/xixi880928/article/details/78711422

版权

构建工具专栏收录该内容

2 篇文章

订阅专栏

本文档介绍了如何在test-web项目中配置grunt，使用babel将es6代码转换为es5。首先，通过npm安装grunt及相关插件，包括load-grunt-tasks和grunt-babel。然后配置grunt任务，设定babel选项，如sourceMap和presets。完成配置后，运行grunt命令，若无错误，输出显示任务完成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们的project是test-web.
安装

Step 1: 进入根目录路径

cd test-web

Step 2: 安装 grunt

npm install –save-dev grunt

Step 3: 安装 load-grunt-tasks

npm install –save-dev load-grunt-tasks

Step 4: 安装 grunt-babel

npm install –save-dev grunt-babel

Step 5: 最后, 启动

grunt

输出结果应该是:

Running “babel:dist” (babel) task

Done, without errors.

将代码转化为es6. 你的 gruntfile.js 应该是这样的:

module.exports = function (grunt)
{
    require("load-grunt-tasks")(grunt); // npm install --save-dev load-grunt-tasks

    grunt.initConfig({
        "babel": {
            options: {
                sourceMap: true,
                presets: ['es2015']
            },
            dist: {
                files: {
                    "dist/app.js": "src/app.js"
                }
            }
        }
    });

    grunt.registerTask("default", ["babel"]);
};

在angularjs+express项目中，用grunt来将所有的前端js文件concat,压缩，watch观看所有的更新以方便开发。所以这里我的思路是：

babel转码。` babel: {
options: {
sourceMap: false,
presets: [‘babel-preset-es2015’]

       },
       dist: {
           files: [{
              expand:true,

              src:['app/js/**/*.js'], //所有js文件
              dest:'build/'  //输出到此目录下
            }]
       }
   },
   `

2.将转化为es5的代码concat/压缩/watch：

concat: {
            options: {
                //separator: ';'
            },
            allInOne: { //所有JS文件全部合并成一份文件
                src: ['build/**/*.js'],//这时经过转码之后的js文件
                dest: 'app/javascript/<%= pkg.name %>.js'
            }
        },

        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            dist: {
              files: {
                'app/javascript/<%=pkg.name %>.min.js': ['<%= concat.allInOne.dest %>']
              }
            }
        },
        watch: {

            javascript: {
                files: ['app/js/**/*.js'],
                tasks: ['babel:dist','concat:allInOne', 'uglify:dist'],//这里是每次js文件有改动的时候，grunt会自动做的工作，即转码，concat,压缩
                options: {
                   livereload:true,

                    interrupt: true
                },
           babel:{
              files:'build/js/**/*.js',
              tasks:['babel']
              }
            },
            express: {
              files: ['main.js'],
              options: {
                spawn: false
              }
            }
        }

3.通过express进入主文件并启动项目:

 express: {
          options: {

          },
          dev: {
            options: {
              script: 'main.js'
            }
          }
        }