Gruntjs 如何在babel 7.4和grunt中使用polyfills?

Gruntjs 如何在babel 7.4和grunt中使用polyfills?,gruntjs,internet-explorer-11,babeljs,core-js,Gruntjs,Internet Explorer 11,Babeljs,Core Js,我在使用babel和grunt时遇到了一些IE11问题。我需要使用一位前同事编写的新ECMA特性来填充一些代码,他将babel更新为7.4(但没有将babelrc更改为使用corejs),并且代码未在IE11中测试。所以现在代码在InternetExplorer中不起作用了,我不得不在没有巴贝尔和格伦特更深入的知识的情况下进行多填充。我将babelrc预设环境更改为使用内置,但无法使其运行 我将babelrc更改为使用内置的预设环境。所以我将useBuiltIns设置为usage,这样polyf

我在使用babel和grunt时遇到了一些IE11问题。我需要使用一位前同事编写的新ECMA特性来填充一些代码,他将babel更新为7.4(但没有将babelrc更改为使用corejs),并且代码未在IE11中测试。所以现在代码在InternetExplorer中不起作用了,我不得不在没有巴贝尔和格伦特更深入的知识的情况下进行多填充。我将babelrc预设环境更改为使用内置,但无法使其运行

我将babelrc更改为使用内置的预设环境。所以我将useBuiltIns设置为usage,这样polyfills只在需要时包含。但巴贝尔随后生成了“require”语句,当然浏览器无法解释这些语句。即使我将useBuiltIns设置为“entry”(我不知道“usage”有什么区别),我在IE11的js控制台中也会得到“SCRIPT5009:“Symbol”未定义”作为错误

package.json:
{
  "name": "xyproject",
  "version": "1.0.0",
  "dependencies": {
    "bootstrap3-dialog": "^1.35.4",
    "core-js": "^3.1.4",
    "datatables.net-bs": "^1.10.19",
    "datatables.net-buttons-bs": "^1.5.6",
    "datatables.net-colreorder-bs": "^1.5.1",
    "datatables.net-responsive": "^2.2.3",
    "datatables.net-responsive-bs": "^2.2.3",
    "normalize-scss": "^7.0.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-transform-object-assign": "^7.2.0",
    "@babel/preset-env": "^7.5.5",
    "babel-preset-minify": "^0.5.0",
    "grunt": "^1.0.4",
    "grunt-babel": "^8.0.0",
    "grunt-concurrent": "^2.3.1",
    "grunt-contrib-clean": "^2.0.0",
    "grunt-contrib-compass": "^1.1.1",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-sass": "^1.0.0",
    "grunt-contrib-uglify": "^3.4.0",
    "grunt-contrib-uglify-es": "^3.3.0",
    "grunt-contrib-watch": "^1.1.0",
    "grunt-newer": "^1.3.0",
    "grunt-notify": "^0.4.5",
    "jit-grunt": "^0.10.0",
    "time-grunt": "^1.4.0",
    "uglify-es": "github:mishoo/UglifyJS2#harmony"
  }
}
.LRC:

{
  "sourceType": "unambiguous",
  "sourceMap": true,
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-template-literals",
    "@babel/plugin-transform-object-assign"
  ],
  "presets": [
    [
      "@babel/preset-env", {
        "debug": false,
        "useBuiltIns": "usage",
        "corejs": 3,
        "targets": {
          "ie": "9"
        }
      }
    ],
    [
      "minify", {
        "mangle": true,
        "deadcode": true,
        "simplify": true,
        "builtIns": false
      }
    ]
  ]
}

Grunfile.js:

'use strict';

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('../../package.json'),

    config: {
      sass:         'assets/scss',
      css:          'assets/css',
      js:           'assets/js',
      templates:    'assets/templates',
      build:        'assets/build',
      node_modules: 'node_modules'
    },

    // notify if process is done
    notify: {
      watch_js: {
        options: {
          title: 'Task Complete',
          message: 'JS Tasks are completed'
        }
      },
      watch_css: {
        options: {
          title: 'Task Complete',
          message: 'SCSS/CSS Tasks are completed'
        }
      }
    },

    // Bablify our js files - we're now able
    // to write JS code in newest style :)
    // Babel will transpile the code for elder browsers
    babel: {
      options: {
        // babelrc: false,
        // sourceType: 'unambiguous',
        // sourceMap: true,
        // presets: [
        //   [
        //     '@babel/preset-env', {
        //       targets: {
        //         ie: '9'
        //       }
        //     },
        //   ],
        //   [
        //     'minify', {
        //       mangle: true,
        //       deadcode: true,
        //       simplify: true,
        //       // evaluate: true
        //     }
        //   ]
        // ],
      },
      dist: {
        files: {
          '<%= config.build %>/backend.min.js':         '<%= config.build %>/backend.min.js',
          '<%= config.build %>/backend_tables.min.js':  '<%= config.build %>/backend_tables.min.js',
          '<%= config.build %>/backend_pages.min.js':   '<%= config.build %>/backend_pages.min.js',
          '<%= config.build %>/wysiwyg.min.js':         '<%= config.build %>/wysiwyg.min.js',
          '<%= config.build %>/dataview.min.js':        '<%= config.build %>/dataview.min.js',
          '<%= config.build %>/reporting.min.js':       '<%= config.build %>/reporting.min.js',
          // '<%= config.build %>/search.min.js':          '<%= config.build %>/search.min.js',
        }
      }
    },

    build: {
      clean: {
        tasks: ['clean']
      },
      css: {
        tasks: ['sass']
      },
      js: {
        tasks: [
          'concat',
          'babel',
          'uglify',
          'remove_unnecessary_files'
        ]
      }
    },

    // removes all files from folder
    clean: ['<%= config.build %>/'],

    // compiles scss to css
    sass: {
      dist: {
        options: {
          style: 'compressed',
          compass: false,
          loadPath: [
            'node_modules/normalize-scss/sass'
          ]
        },
        files: {
          '<%= config.build %>/main.css': [
            '<%= config.sass %>/main.scss',
            '<%= config.node_modules %>/bootstrap3-dialog/src/css/bootstrap-dialog.css'
          ]
        }
      }
    },

    concat: {
      options: {
        sourceMap: true
      },
      libs: {
        src: [
          '<%= config.node_modules %>/@babel/polyfill/dist/polyfill.min.js',
          '<%= config.js %>/libs/jquery.min.js',
          '<%= config.js %>/libs/jquery-ui.min.js',
          '<%= config.js %>/libs/jquery.validate.js',

          // bootstrap-4.1.3-dist/js/bootstrap.bundle.js
          // '<%= config.js %>/bootstrap-4.1.3-dist/js/bootstrap.js',
          // '<%= config.js %>/bootstrap-4.1.3-dist/js/bootstrap.bundle.js',

          '<%= config.js %>/libs/bootstrap.min.js',
          '<%= config.js %>/libs/bootstrap-select.js',
          '<%= config.js %>/libs/bootstrap-datepicker.js',
          '<%= config.js %>/libs/bootstrap-tagsinput.js',
          '<%= config.js %>/libs/jquery.mCustomScrollbar.min.js',
          '<%= config.js %>/libs/icheck.min.js',
          // '<%= config.js %>/libs/jquery.tagsinput.min.js',
          '<%= config.js %>/libs/jquery.noty.js',
          '<%= config.js %>/libs/noty-layouts/topRight.js',
          '<%= config.js %>/libs/noty-themes/default.js',
          '<%= config.js %>/libs/jquery.nestable.js',
          '<%= config.js %>/libs/fileinput.min.js',
          '<%= config.js %>/libs/moment.min.js',
          '<%= config.js %>/libs/plugins.js',
          '<%= config.js %>/libs/actions.js',
          '<%= config.js %>/libs/jquery.cookie.js',
          '<%= config.js %>/libs/spin.min.js',
          '<%= config.js %>/libs/select2.js',
          '<%= config.js %>/libs/icheck_custom.js',
          '<%= config.js %>/libs/bootstrap-typeahead.min.js',
          '<%= config.js %>/libs/daterangepicker.js',
          // if you want to add Datatatables plugins, see the following lines on how to do so:
          //          '<%= config.js %>/libs/datatables.js',
          '<%= config.node_modules %>/datatables.net/js/jquery.dataTables.js',
          '<%= config.node_modules %>/datatables.net-bs/js/dataTables.bootstrap.js',
          '<%= config.node_modules %>/datatables.net-buttons/js/dataTables.buttons.js',
          '<%= config.node_modules %>/datatables.net-buttons/js/buttons.colVis.js',
          '<%= config.node_modules %>/datatables.net-buttons-bs/js/buttons.bootstrap.js',
          '<%= config.node_modules %>/datatables.net-colreorder/js/dataTables.colReorder.js',
          '<%= config.node_modules %>/datatables.net-responsive/js/dataTables.responsive.js',
          '<%= config.node_modules %>/datatables.net-responsive-bs/js/responsive.bootstrap.js',
          '<%= config.node_modules %>/bootstrap3-dialog/src/js/bootstrap-dialog.js',

          '<%= config.js %>/libs/lodash.min.js',

          '<%= config.js %>/libs/filesaver.js',
          '<%= config.js %>/libs/queue.js',
        ],
        dest: '<%= config.build %>/libs.min.js'
      },
      backend: {
        src: [
          '<%= config.js %>/globals.js',
          '<%= config.js %>/backend.js',
          '<%= config.js %>/datatable.js',
          '<%= config.js %>/action.js',
          '<%= config.js %>/menu.js',
          '<%= config.js %>/validate.js',
          '<%= config.js %>/ajax.js',
          '<%= config.js %>/adv_search.js',
          '<%= config.js %>/massupdate.js',
          '<%= config.js %>/storage.js',
          '<%= config.js %>/widgets.js',
          '<%= config.js %>/sessionTimer.js',
          '<%= config.js %>/widgets.js',
          '<%= config.js %>/impersonate.js',
          '<%= config.js %>/helper/*.js'
        ],
        dest: '<%= config.build %>/backend.min.js'
      },
      pages: {
        src: [
          '<%= config.js %>/page_*.js',
        ],
        dest: '<%= config.build %>/backend_pages.min.js'
      },
      dataview: {
        src: [
          '<%= config.js %>/dataview/*.js',
        ],
        dest: '<%= config.build %>/dataview.min.js'
      },
      reporting: {
        src: [
          '<%= config.js %>/reporting/*.js',
        ],
        dest: '<%= config.build %>/reporting.min.js'
      },
      tables: {
        src: [
          '<%= config.js %>/table_*.js',
          '<%= config.js %>/table_search/type_base.js',
          '<%= config.js %>/table_search/*.js',
        ],
        dest: '<%= config.build %>/backend_tables.min.js'
      },
      /*search: {
        src: [
          // '<%= config.js %>/table_*.js',
          '<%= config.js %>/table_search/*.js',
        ],
        dest: '<%= config.build %>/search.min.js'
      },*/
      wysiwyg: {
        src: [
          '<%= config.js %>/wysiwyg.js',
        ],
        dest: '<%= config.build %>/wysiwyg.min.js'
      }
    },

    watch: {
      options: {
        spawn: false // add spawn option in watch task
      },
      css: {
        files: [
          '<%= config.sass %>/*.scss',
          '<%= config.sass %>/*/**'
        ],
        tasks: [
          'sass',
          'notify:watch_css'
        ]
      },
      devIe: {
        files: [
          '<%= config.js %>/*.js',
          '<%= config.js %>/*/**'
        ],
        tasks: [
          'concat',
          'babel',
          'notify:watch_js'
        ]
      },
      js_dev: {
        files: [
          '<%= config.js %>/*.js',
          '<%= config.js %>/*/**'
        ],
        tasks: [
          'concat',
          // 'babel',
          // 'rename_js_files',
          'notify:watch_js'
        ]
      },
      livereload: {
        options: {
          livereload: true
        },
        files: ['<%= config.build %>**/*.js', '<%= config.build %>/main.css']
      }
    },

    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %> */',
        sourceMap: {
          includeSources: true
        },
        report: 'gzip',
        output: {
          comments: false
        },
        sourceMapIn: function(path) {
          return path + '.map';
        }
      },
      dist: {
        files: {
          '<%= config.build %>/libs.min.js': ['<%= config.build %>/libs.min.js'],
          '<%= config.build %>/backend.min.js': ['<%= config.build %>/backend.min.js'],
          '<%= config.build %>/backend_tables.min.js': ['<%= config.build %>/backend_tables.min.js'],
          '<%= config.build %>/backend_pages.min.js': ['<%= config.build %>/backend_pages.min.js'],
          '<%= config.build %>/wysiwyg.min.js': '<%= config.build %>/wysiwyg.min.js',
          '<%= config.build %>/dataview.min.js': ['<%= config.build %>/dataview.min.js'],
          '<%= config.build %>/reporting.min.js': ['<%= config.build %>/reporting.min.js'],
          '<%= config.build %>/search.min.js': ['<%= config.build %>/search.min.js'],
        }
      }
    },

    concurrent: {
      options: {
        logConcurrentOutput: true
      },
      dev: {
        tasks: ['watch:js_dev', 'watch:css', 'watch:livereload']
        // tasks: ['watch:js_dev', 'watch:css']
      },
      devIe: {
        tasks: ['watch:devIe', 'watch:css']
        // tasks: ['watch:js_dev', 'watch:css']
      }
    }
  });

  // grunt.loadNpmTasks('grunt-contrib-sass');
  // grunt.loadNpmTasks('grunt-contrib-watch');
  // grunt.loadNpmTasks('grunt-contrib-concat');
  // grunt.loadNpmTasks('grunt-contrib-uglify');
  // grunt.loadNpmTasks('grunt-contrib-handlebars');
  // grunt.loadNpmTasks('grunt-notify');
  // grunt.loadNpmTasks('grunt-concurrent');
  grunt.loadNpmTasks('grunt-contrib-uglify-es');

  grunt.registerMultiTask('build', 'build the given task', function() {
    grunt.task.run( this.data.tasks );
  });

  grunt.registerTask('remove_unnecessary_files', 'Remove *.js to *.min.js', () => {
    let fs,
      fileNames,
      fileName;

    fs = require('fs');

    fileNames = [
      'backend_tables.js',
      'backend_tables.js.map',
      'backend_tables.min.js.map',
      'backend.js',
      'backend.js.map',
      'backend.min.js.map',
      'backend_pages.js',
      'backend_pages.js.map',
      'backend_pages.min.js.map',
      'libs.js',
      'libs.js.map',
      'libs.min.js.map',
      'main.css.map'
    ];

    for (fileName in fileNames) {
      if (fs.existsSync(grunt.config.data.config.build + '/' + fileNames[fileName])) {
        fs.unlink(grunt.config.data.config.build + '/' + fileNames[fileName], (err) => {
          if (err) {
            grunt.log.error(`Remove ${grunt.config.data.config.build + '/' + fileNames[fileName]} failed: ${err}`);
          } else {
            grunt.log.ok(`Remove ${grunt.config.data.config.build + '/' + fileNames[fileName]} done`);
          }
        });
      }
    }

  });

  grunt.registerTask('rename_js_files', 'Rename *.js to *.min.js', function() {
    var fs,
        libsFileName,
        libsMinFileName,
        backendFileName,
        backendMinFileName;

    fs = require('fs');
    libsFileName = grunt.config.data.config.build + '/libs.js';
    libsMinFileName = grunt.config.data.config.build + '/libs.min.js';

    backendFileName = grunt.config.data.config.build + '/backend.js';
    backendMinFileName = grunt.config.data.config.build + '/backend.min.js';

    fs.rename(libsFileName, libsMinFileName, function(err) {
      if (err) {
        grunt.log.error('ERROR: ' + err);
      }
    });

    fs.rename(backendFileName, backendMinFileName, function(err) {
      if (err) {
        grunt.log.error('ERROR: ' + err);
      }
    });
  });

  // grunt.registerTask('default', ['build', 'watch:css', 'watch:js']);
  grunt.registerTask('watch:dev', ['build', 'concurrent:dev']);
  // grunt.registerTask('watch:dev-ie', ['build', 'concurrent:devIe']);
  grunt.registerTask('watch:dev-ie', ['watch:devIe', 'watch:css', 'watch:livereload']);

  require('jit-grunt')(grunt);
};
“严格使用”;
module.exports=函数(grunt){
grunt.initConfig({
pkg:grunt.file.readJSON('../../package.json'),
配置:{
sass:“资产/SCS”,
css:“资产/css”,
js:‘资产/js’,
模板:“资产/模板”,
构建:“资产/构建”,
节点\模块:“节点\模块”
},
//通知流程是否完成
通知:{
注意:{
选项:{
标题:“任务完成”,
消息:“JS任务已完成”
}
},
关注css:{
选项:{
标题:“任务完成”,
消息:“SCSS/CSS任务已完成”
}
}
},
//Bablify我们的js文件-我们现在可以
//要以最新样式编写JS代码:)
//Babel将为老浏览器传输代码
巴别塔:{
选项:{
//巴别塔:错,
//sourceType:'明确',
//sourceMap:true,
//预设:[
//   [
//“@babel/preset env”{
//目标:{
//例如:“9”
//       }
//     },
//   ],
//   [
//“缩小”{
//曼格尔:没错,
//死亡代码:对,
//是的,
////求值:true
//     }
//   ]
// ],
},
地区:{
档案:{
“/backend.min.js”:“/backend.min.js”,
“/backend_tables.min.js”:“/backend_tables.min.js”,
“/backend_pages.min.js”:“/backend_pages.min.js”,
“/wysiwyg.min.js”:“/wysiwyg.min.js”,
“/dataview.min.js”:“/dataview.min.js”,
“/reporting.min.js”:“/reporting.min.js”,
//“/search.min.js”:“/search.min.js”,
}
}
},
建造:{
清洁:{
任务:[“清理”]
},
css:{
任务:['sass']
},
js:{
任务:[
"海螺",,
“巴别塔”,
"丑",,
“删除不必要的文件”
]
}
},
//从文件夹中删除所有文件
清洁:['/'],
//将SCS编译为css
sass:{
地区:{
选项:{
样式:“压缩”,
罗盘:错,
加载路径:[
“节点模块/规范化SCS/sass”
]
},
档案:{
“/main.css”:[
“/main.scss”,
“/bootstrap3 dialog/src/css/bootstrap dialog.css”
]
}
}
},
康卡特:{
选项:{
sourceMap:true
},
libs:{
src:[
“/@babel/polyfill/dist/polyfill.min.js”,
“/libs/jquery.min.js”,
“/libs/jquery ui.min.js”,
“/libs/jquery.validate.js”,
//bootstrap-4.1.3-dist/js/bootstrap.bundle.js
//“/bootstrap-4.1.3-dist/js/bootstrap.js”,
//“/bootstrap-4.1.3-dist/js/bootstrap.bundle.js”,
“/libs/bootstrap.min.js”,
“/libs/bootstrap select.js”,
“/libs/bootstrap datepicker.js”,
“/libs/bootstrap tagsinput.js”,
“/libs/jquery.mCustomScrollbar.min.js”,
“/libs/icheck.min.js”,
//“/libs/jquery.tagsinput.min.js”,
“/libs/jquery.noty.js”,
“/libs/noty layouts/topRight.js”,
“/libs/noty themes/default.js”,
“/libs/jquery.nestable.js”,
“/libs/fileinput.min.js”,
“/libs/moment.min.js”,
“/libs/plugins.js”,
“/libs/actions.js”,
“/libs/jquery.cookie.js”,
“/libs/spin.min.js”,
“/libs/select2.js”,
“/libs/icheck_custom.js”,
“/libs/bootstrap typeahead.min.js”,
“/libs/daterangepicker.js”,
//如果要添加Datatatables插件,请参阅以下几行,了解如何添加:
//“/libs/datatables.js”,
“/datatables.net/js/jquery.datatables.js”,
“/datatables.net bs/js/datatables.bootstrap.js”,
“/datatables.net buttons/js/datatables.buttons.js”,
“/datatables.net buttons/js/buttons.colVis.js”,
“/datatables.net buttons bs/js/buttons.bootstrap.js”,
“/datatables.net colreorder/js/datatables.colreorder.js”,
“/datatables.net responsive/js/datatables.responsive.js”,
“/datatables.net responsive bs/js/responsive.bootstrap.js”,
“/bootstrap3 dialog/src/js/bootstrap dialog.js”,
“/libs/lodash.min.js”,
“/libs/filesaver.js”,
“/libs/queue.js”,
],
dest:“/libs.min.js”
},
后端:{
src:[
“/globals.js”,
“/backend.js”,
“/datatable.js”,
“/action.js”,
“/menu.js”,
“/validate.js”,
“/ajax.js”,
“/adv_search.js”,
“/massupdate.js”,
“/storage.js”,
“/widgets.js”,
“/sessionTimer.js”,
“/widgets.js”,
“/impersonate.js”,
“/helper/*.js”
],
dest:“/backend.min.js”
},
帕