So I am using angularjs 1.5 with grunt and bower. I have added es6 support using babel to transpile the code for browsers not yet fully compatible with es6. With babel my es6 functionality works perfect in all browsers except ie11. I followed the instructions presented and have looked at all post I have found regarding this manner and the following files is what have been setup as a result. I have tried various workarounds and nothing I have done has been able to transform the es6 code into its es5 equivalent for compatability with IE11 specifically. I have also looked through open issues with grunt-babel currently and have not found anything to resolve this.
Directory structure
appDirectory -src main java/ webapp/ assets/` bowercomponents/ dist/ -assets/ -scripts/ -app/ -components/ 20380283403.vendor.js 92038420342.app.js index.html scripts/ -app/ *Contains All JS files related to views and controllers.* -components/ *Contains All JS files related to service calls.*
.babelrc
{ "plugins": [ ["es2015-ie"] ] } gruntfile.js
'use strict'; var fs = require('fs'); var parseString = require('xml2js').parseString; // Returns the second occurence of the version number var parseVersionFromPomXml = function () { var version; var pomXml = fs.readFileSync('pom.xml', "utf8"); parseString(pomXml, function (err, result) { version = result.project.version[0]; }); return version; }; // usemin custom step var useminAutoprefixer = { name: 'autoprefixer', createConfig: require('grunt-usemin/lib/config/cssmin').createConfig // Reuse cssmins createConfig }; module.exports = function (grunt) { require('load-grunt-tasks')(grunt); require('time-grunt')(grunt); grunt.initConfig({ yeoman: { // configurable paths app: require('./bower.json').appPath || 'app', dist: 'src/main/webapp/dist' }, watch: { bower: { files: ['bower.json'], tasks: ['wiredep'] }, ngconstant: { files: ['Gruntfile.js', 'pom.xml'], tasks: ['ngconstant:dev'] }, styles: { files: ['src/main/webapp/assets/styles/**/*.scss'], tasks: ['sass'] }, injector: { files: ['src/main/webapp/scripts/**/*.js'], tasks: ['injector:js'] } }, autoprefixer: { // not used since Uglify task does autoprefixer, // options: ['last 1 version'], // dist: { // files: [{ // expand: true, // cwd: '.tmp/styles/', // src: '**/*.css', // dest: '.tmp/styles/' // }] // } }, sass: { dist: { options: { sourcemap: 'none' }, files: [{ expand: true, cwd: 'src/main/webapp/assets/styles/', src: ['**/*.scss'], dest: 'src/main/webapp/assets/styles', ext: '.css' }] } }, wiredep: { app: { src: ['src/main/webapp/index.html'], exclude: [ /angular-i18n/, // localizations are loaded dynamically /swagger-ui/ ] }, test: { src: 'src/test/javascript/karma.conf.js', exclude: [/angular-i18n/, /swagger-ui/, /angular-scenario/], ignorePath: /\.\.\/\.\.\//, // remove ../../ from paths of injected javascripts devDependencies: true, fileTypes: { js: { block: /(([\s\t]*)\/\/\s*bower:*(\S*))(\n|\r|.)*?(\/\/\s*endbower)/gi, detect: { js: /'(.*\.js)'/gi }, replace: { js: '\'{{filePath}}\',' } } } } }, injector: { options: {}, // Inject application script files into index.html (doesn't include bower) scripts: { options: { transform: function (filePath) { filePath = filePath.replace('/src/main/webapp/', ''); return '<script src="' + filePath + '"></script>'; } }, files: { 'src/main/webapp/index.html': [ ['src/main/webapp/scripts/**/*.js', '!src/main/webapp/scripts/app/app.module.js', '!src/main/webapp/scripts/app/app.config.js', '!src/main/webapp/scripts/app/app.constants.js', '!src/main/webapp/scripts/app/app.route.js', '!src/main/webapp/scripts/app/app.run.js'] ] } }, // Inject component css into index.html css: { options: { transform: function (filePath) { filePath = filePath.replace('/src/main/webapp/', ''); return '<script src="' + filePath + '"></script>'; } }, files: { 'src/main/webapp/index.html': [ 'src/main/webapp/assets/styles/**/*.css' ] } } }, browserSync: { dev: { bsFiles: { src: [ 'src/main/webapp/**/*.html', 'src/main/webapp/**/*.json', 'src/main/webapp/assets/styles/**/*.scss', 'src/main/webapp/assets/styles/**/*.css', 'src/main/webapp/scripts/**/*.js', 'src/main/webapp/assets/images/**/*.{png,jpg,jpeg,gif,webp,svg}', 'tmp/**/*.{css,js}' ] } }, options: { watchTask: true, proxy: "localhost:8080" } }, clean: { dist: { files: [{ dot: true, src: [ '.tmp', '<%= yeoman.dist %>/*', '!<%= yeoman.dist %>/.git*' ] }] }, server: '.tmp' }, jshint: { options: { jshintrc: '.jshintrc' }, all: [ 'Gruntfile.js', 'src/main/webapp/scripts/app.js', 'src/main/webapp/scripts/app/**/*.js', 'src/main/webapp/scripts/components/**/*.js' ] }, coffee: { options: { sourceMap: true, sourceRoot: '' }, dist: { files: [{ expand: true, cwd: 'src/main/webapp/scripts', src: ['scripts/app/**/*.coffee', 'scripts/components/**/*.coffee'], dest: '.tmp/scripts', ext: '.js' }] }, test: { files: [{ expand: true, cwd: 'test/spec', src: '**/*.coffee', dest: '.tmp/spec', ext: '.js' }] } }, concat: { // not used since Uglify task does concat, // but still available if needed // dist: {} }, rev: { dist: { options: { encoding: 'utf8', algorithm: 'md5', length: 12 }, files: { src: [ '<%= yeoman.dist %>/scripts/**/*.js', '<%= yeoman.dist %>/assets/styles/**/*.css', '<%= yeoman.dist %>/assets/images/**/*.{png,jpg,jpeg,gif,webp,svg}', '<%= yeoman.dist %>/assets/fonts/*' ] } } }, useminPrepare: { html: 'src/main/webapp/**/*.html', options: { dest: '<%= yeoman.dist %>', flow: { html: { steps: { js: ['uglifyjs'], css: ['cssmin', useminAutoprefixer] // Let cssmin concat files so it corrects relative paths to fonts and images }, post: {} } } } }, usemin: { html: ['<%= yeoman.dist %>/**/*.html'], css: ['<%= yeoman.dist %>/assets/styles/**/*.css'], js: ['<%= yeoman.dist %>/scripts/**/*.js'], options: { assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/assets/styles', '<%= yeoman.dist %>/assets/images', '<%= yeoman.dist %>/assets/fonts'], patterns: { html: [ [/(images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the angular directives that ref revved images'], //defaults from node module [/<script.+src=['"]([^"']+)["']/gm, 'Update the HTML to reference our concat/min/revved script files' ], [/<link[^\>]+href=['"]([^"']+)["']/gm, 'Update the HTML with the new css filenames' ], [/<img[^\>]+src=['"]([^"']+)["']/gm, 'Update the HTML with the new img filenames' ], [/data-main\s*=['"]([^"']+)['"]/gm, 'Update the HTML with data-main tags', function (m) { return m.match(/\.js$/) ? m : m + '.js'; }, function (m) { return m.replace('.js', ''); } ], [/data-(?!main).[^=]+=['"]([^'"]+)['"]/gm, 'Update the HTML with data-* tags' ], [/url\(\s*['"]([^"']+)["']\s*\)/gm, 'Update the HTML with background imgs, case there is some inline style' ], [/<a[^\>]+href=['"]([^"']+)["']/gm, 'Update the HTML with anchors images' ], [/<input[^\>]+src=['"]([^"']+)["']/gm, 'Update the HTML with reference in input' ] ], js: [ [/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images'] ] /* js: [ [/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images'] ]*/ }, dirs: ['<%= yeoman.dist %>'] } }, babel: { options: { sourceMap: true, presets: ['env'], }, dist: { files: [{ expand: true, cwd: 'src/main/webapp/dist', src: ['scripts/app/**/*.js', 'scripts/components/**/*.js'], dest: '.tmp/scripts', ext: '.js' }] } }, imagemin: { dist: { files: [{ expand: true, cwd: 'src/main/webapp/assets/images', src: '**/*.{jpg,jpeg}', // we don't optimize PNG files as it doesn't work on Linux. If you are not on Linux, feel free to use '**/*.{png,jpg,jpeg}' dest: '<%= yeoman.dist %>/assets/images' }] } }, svgmin: { dist: { files: [{ expand: true, cwd: 'src/main/webapp/assets/images', src: '**/*.svg', dest: '<%= yeoman.dist %>/assets/images' }] } }, cssmin: { // By default, your `index.html` <!-- Usemin Block --> will take care of // minification. This option is pre-configured if you do not wish to use // Usemin blocks. // dist: { // files: { // '<%= yeoman.dist %>/styles/main.css': [ // '.tmp/styles/**/*.css', // 'styles/**/*.css' // ] // } // } options: { root: 'src/main/webapp' // Replace relative paths for static resources with absolute path } }, /* nginclude: { options: { discardReferencedFiles: true, parserOptions: { decodeEntities: false }, replacementElementClass: '', replacementElementTag: 'div' } },*/ ngtemplates: { dist: { cwd: 'src/main/webapp', src: ['scripts/app/**/*.html', 'scripts/components/**/*.html',], dest: '.tmp/templates/templates.js', options: { module: 'mangoApp', usemin: 'scripts/app.js', htmlmin: { removeCommentsFromCDATA: true, // https://github.com/yeoman/grunt-usemin/issues/44 collapseWhitespace: true, collapseBooleanAttributes: true, conservativeCollapse: true, removeAttributeQuotes: true, removeRedundantAttributes: true, useShortDoctype: true, removeEmptyAttributes: true, keepClosingSlash: true } } } }, htmlmin: { dist: { options: { removeCommentsFromCDATA: true, // https://github.com/yeoman/grunt-usemin/issues/44 collapseWhitespace: true, collapseBooleanAttributes: true, conservativeCollapse: true, removeAttributeQuotes: true, removeRedundantAttributes: true, useShortDoctype: true, removeEmptyAttributes: true, keepClosingSlash: true }, files: [{ expand: true, cwd: '<%= yeoman.dist %>', src: ['*.html'], dest: '<%= yeoman.dist %>' }] } }, // Put files not handled in other tasks here copy: { dist: { files: [{ expand: true, dot: true, cwd: 'src/main/webapp', dest: '<%= yeoman.dist %>', src: [ '*.html', 'scripts/**/*.html', 'assets/images/**/*.{png,gif,webp,jpg,jpeg,svg}', 'assets/fonts/*' ] }, { expand: true, cwd: '.tmp/assets/images', dest: '<%= yeoman.dist %>/assets/images', src: [ 'generated/*' ] }] }, generateHerokuDirectory: { expand: true, dest: 'deploy/heroku', src: [ 'pom.xml', 'gradlew', '*.gradle', 'gradle.properties', 'gradle/**', 'src/main/**' ] }, generateOpenshiftDirectory: { expand: true, dest: 'deploy/openshift', src: [ 'pom.xml', 'src/main/**' ] }, piwik: { files: [{ expand: true, dot: true, cwd: 'src/main/webapp', dest: '<%= yeoman.dist %>', src: [ 'scripts/components/piwik/piwik.js' ] }] }, markercluster: { files: [{ expand: true, dot: true, cwd: 'src/main/webapp', dest: '<%= yeoman.dist %>', src: [ 'scripts/components/markercluster/leaflet.markercluster-src.js' ] }] }, powerbi: { files: [{ expand: true, dot: true, cwd: 'src/main/webapp', dest: '<%= yeoman.dist %>', src: [ 'assets/js/jquery-powerbi/**' ] }] } }, concurrent: { server: [], test: [], dist: [ 'imagemin', 'svgmin' ] }, karma: { unit: { configFile: 'src/test/javascript/karma.conf.js', singleRun: true } }, cdnify: { dist: { html: ['<%= yeoman.dist %>/*.html'] } }, ngAnnotate: { dist: { files: [{ expand: true, cwd: '.tmp/concat/scripts', src: '*.js', dest: '.tmp/concat/scripts' }] } }, buildcontrol: { options: { commit: true, push: false, connectCommits: false, message: 'Built %sourceName% from commit %sourceCommit% on branch %sourceBranch%' }, heroku: { options: { dir: 'deploy/heroku', remote: 'heroku', branch: 'master' } }, openshift: { options: { dir: 'deploy/openshift', remote: 'openshift', branch: 'master' } } }, ngconstant: { options: { name: 'mangoApp', deps: false, wrap: '"use strict";\n// DO NOT EDIT THIS FILE, EDIT THE GRUNT TASK NGCONSTANT SETTINGS INSTEAD WHICH GENERATES THIS FILE\n{%= __ngModule %}' }, dev: { options: { dest: 'src/main/webapp/scripts/app/app.constants.js' }, constants: { ENV: 'dev', VERSION: parseVersionFromPomXml(), LANGUAGES: [ 'pt-br', 'en' ], DATE_FORMATS: { 'en': 'M!/d!/yyyy', 'pt-br': 'd/M/yyyy', 'fr': 'MM/dd/yyyy', 'es': 'MM/dd/yyyy' }, DATE_FORMATS_PLACEHOLDER: { 'en': 'MM/DD/YYYY', 'pt-br': 'DD/MM/AAAA', 'fr': 'MM/DD/YYYY', 'es': 'MM/DD/YYYY' }, } }, prod: { options: { dest: '.tmp/scripts/app/app.constants.js' }, constants: { ENV: 'prod', VERSION: parseVersionFromPomXml() } }, prod2: { options: { dest: '.tmp/scripts/app/app.constants.js' }, ngconstant: { options: { name: 'siilaApp', deps: false, wrap: '"use strict";\n// DO NOT EDIT THIS FILE, EDIT THE GRUNT TASK NGCONSTANT SETTINGS INSTEAD WHICH GENERATES THIS FILE\n{%= __ngModule %}' }, dev: { options: { dest: 'src/main/webapp/scripts/app/app.constants.js' }, constants: { ENV: 'dev', VERSION: parseVersionFromPomXml() } }, prod: { options: { dest: '.tmp/scripts/app/app.constants.js' }, constants: { ENV: 'prod', VERSION: parseVersionFromPomXml() } }, prod2: { options: { dest: '.tmp/scripts/app/app.constants.js' }, constants: { ENV: 'prod2', VERSION: parseVersionFromPomXml() } }, develop: { options: { dest: '.tmp/scripts/app/app.constants.js' }, constants: { ENV: 'develop', VERSION: parseVersionFromPomXml() } } } } } }); grunt.registerTask('serve', [ 'clean:server', 'wiredep', 'sass', 'injector', 'ngconstant:dev', 'concurrent:server', 'browserSync', 'watch' ]); grunt.registerTask('server', function (target) { grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.'); grunt.task.run([target ? ('serve:' + target) : 'serve']); }); grunt.registerTask('test', [ 'clean:server', 'wiredep:test', 'ngconstant:dev', 'concurrent:test', 'karma' ]); grunt.registerTask('build', [ 'clean:dist', 'wiredep:app', 'sass', 'injector', 'ngconstant:prod', 'useminPrepare', 'ngtemplates', 'concurrent:dist', 'concat', 'copy:dist', 'ngAnnotate', 'cssmin', 'autoprefixer', 'uglify', 'babel', 'rev', 'copy:piwik', 'copy:markercluster', 'copy:powerbi', 'usemin', 'htmlmin' ]); grunt.registerTask('appendSkipBower', 'Force skip of bower for Gradle', function () { var filepath = 'deploy/heroku/gradle.properties'; if (!grunt.file.exists(filepath)) { // Assume this is a maven project return true; } var fileContent = grunt.file.read(filepath); var skipBowerIndex = fileContent.indexOf("skipBower=true"); if (skipBowerIndex != -1) { return true; } grunt.file.write(filepath, fileContent + "\nskipBower=true\n"); }); grunt.registerTask('buildHeroku', [ 'test', 'build', 'copy:generateHerokuDirectory', 'appendSkipBower' ]); grunt.registerTask('deployHeroku', [ 'test', 'build', 'copy:generateHerokuDirectory', 'appendSkipBower', 'buildcontrol:heroku' ]); grunt.registerTask('buildOpenshift', [ 'test', 'build', 'copy:generateOpenshiftDirectory', ]); grunt.registerTask('deployOpenshift', [ 'test', 'build', 'copy:generateOpenshiftDirectory', 'buildcontrol:openshift' ]); grunt.registerTask('default', [ 'test', 'build' ]); }; package.json
{ "name": "m", "version": "0.0.0", "description": "Desc", "private": true, "dependencies": { "angular-powerbi": "^1.0.0-beta.1", "requirejs": "^2.3.5" }, "devDependencies": { "babel-core": "^6.26.0", "babel-plugin-transform-es2015-arrow-functions": "^6.22.0", "babel-preset-env": "^1.6.1", "babel-preset-es2015-ie": "^6.7.0", "bower": "^1.8.2", "event-stream": "^3.2.2", "generator-jhipster": "^2.9.2", "grunt": "^0.4.5", "grunt-angular-templates": "^1.1.0", "grunt-autoprefixer": "^2.2.0", "grunt-babel": "^7.0.0", "grunt-browser-sync": "^2.2.0", "grunt-build-control": "^0.3.0", "grunt-cli": "^0.1.13", "grunt-concurrent": "^1.0.1", "grunt-contrib-clean": "^0.6.0", "grunt-contrib-concat": "^0.5.1", "grunt-contrib-copy": "^0.8.0", "grunt-contrib-cssmin": "^0.11.0", "grunt-contrib-htmlmin": "^2.2.0", "grunt-contrib-imagemin": "^1.0.1", "grunt-contrib-jshint": "^0.10.0", "grunt-contrib-sass": "^1.0.0", "grunt-contrib-uglify-es": "^3.3.0", "grunt-contrib-watch": "^0.6.1", "grunt-injector": "^1.1.0", "grunt-karma": "^0.10.1", "grunt-modernizr": "^0.6.0", "grunt-ng-annotate": "^0.10.0", "grunt-ng-constant": "^1.1.0", "grunt-rev": "^0.1.0", "grunt-svgmin": "^2.0.1", "grunt-text-replace": "^0.4.0", "grunt-usemin": "^3.0.0", "grunt-wiredep": "^2.0.0", "jasmine-core": "^2.5.2", "jshint-stylish": "^1.0.1", "karma": "^0.12.32", "karma-chrome-launcher": "^0.1.7", "karma-html2js-preprocessor": "^0.1.0", "karma-jasmine": "^0.3.5", "karma-phantomjs-launcher": "^0.1.4", "karma-requirejs": "^0.2.2", "karma-script-launcher": "^0.1.0", "load-grunt-tasks": "^3.1.0", "lodash": "^3.3.1", "requirejs": "^2.3.5", "time-grunt": "^1.1.0", "wiredep": "^2.2.2", "xml2js": "^0.4.5", "zeparser": "0.0.7" }, "engines": { "node": ">=0.10.0" } } 
1 Answers
Answers 1
Try this, In gruntfile.js add the following code and note that it needs autopolyfiller dependency:
grunt.initConfig({ autopolyfiller: { latest_browsers_and_ie: { options: { browsers: ['last 2 version', 'ie 8', 'ie 9', 'ie 11'] }, files: { 'www/file_with_all_polyfills.js': ['your/js/**/*.js'] } } } }); 
0 comments:
Post a Comment