Gruntjs 如何在babel 7.4和grunt中使用polyfills?
我在使用babel和grunt时遇到了一些IE11问题。我需要使用一位前同事编写的新ECMA特性来填充一些代码,他将babel更新为7.4(但没有将babelrc更改为使用corejs),并且代码未在IE11中测试。所以现在代码在InternetExplorer中不起作用了,我不得不在没有巴贝尔和格伦特更深入的知识的情况下进行多填充。我将babelrc预设环境更改为使用内置,但无法使其运行 我将babelrc更改为使用内置的预设环境。所以我将useBuiltIns设置为usage,这样polyfills只在需要时包含。但巴贝尔随后生成了“require”语句,当然浏览器无法解释这些语句。即使我将useBuiltIns设置为“entry”(我不知道“usage”有什么区别),我在IE11的js控制台中也会得到“SCRIPT5009:“Symbol”未定义”作为错误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
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”
},
帕