Requirejs Multi-page, multi-entry JS file Packaging summary

The following points need to be clarified:

1. The local front-end debug code must be to call the original path and code, but the line must be run by another path after the package, which is the generated Dist folder.

2.requirejs Introduction, how to control the path below the line? We have this control, the code is as follows:

<src= "${resource}/js/base/require.js"  data-main= "${resource}/js /accountmain "></script>

This ${resource} is the service-side control passed to the page, the value of local debugging this ${resource} is/resource/v1/; then the value on the line is/dist/v1/. So this JS line with the line below the completion of the match. Local debugging calls is the resources below/resource/v1/, online is the resources under/DIST/V1/, of course, this v1 is actually superfluous, was mainly to do the release version of the version number added.

Let's take a step-by-step tutorial on how to package the entry files under resource/v1/js/.

First look at where all my entry files are,:

These JS are below the resource/v1/js/.

The entrance now has 11 JS files, all need to pack the introduced modules into their own entry JS.

The first step, I copy the original resources in the Fonts,images,css and JS under the base, where the JS file under base is mainly the basic library, including the Requirejs library and so on. Copy to the Dist folder.

The role of replication is that I also need dist under the fonts,images,css on line.

copy: {/*main: {expand:true, CWD: ' src ', src: ' * * ', dest: ' dist/', },          */main:{files:[{expand:true, CWD: ' resources/v1/css/', src: ' * * ', dest: ' dist/v1/css/'}, {expand:true, CWD: ' resources/v1/fonts/', src: ' * * ', dest: ' dist/v1/fonts/'}, {expand:true, CWD: ' resources/v1/images/', src: ' * * ', dest: ' dist/v1/images/'}, {expand:true, CWD: ' resources/v1/js/base/', src: ' * * ', dest: ' dist/v1/js/base/'}              ]          }        }

The second step is to grunt-contrib-requirejs package the entry file. The configuration file is as follows:

//r.js Packaging Preparation    varFiles = Grunt.file.expand (' resources/v1/js/*.js '); varRequirejsoptions = {};//the object used to store the packaged configuration    //traversing FilesFiles.foreach (function(File,index,array) {varName = file.substring (File.lastindexof ('/') + 1); varReqname = Name.replace (/\.js$/, ");        Console.log (name); varfilename = ' Requirejs ' +index; Requirejsoptions[filename]={options: {baseUrl:"Resources/v1/js", paths:{"jquery": ' Base/jquery-1.11.3.min ',                    ' Vue ': ' Base/vue.min ',                    "Vuedraggable": ' Base/vuedraggable ',                    ' Bootstrap ': ' Base/bootstrap.min ',                    "Sortablejs": ' Base/sortable ',                    "Basiclib": ' Widgets/basiclib ',                    ' msg ': ' Widgets/msg ',                    ' BaseUrl ': ' Widgets/baseurl ',                    ' Common ': ' Widgets/common ',                    "Ajaxfileupload": ' Widgets/ajaxfileupload ',                    ' Document ': ' Widgets/document ',                    "Comp": ' Widgets/comp ',                    ' Header ': ' Module/header ',                    ' Accountcenter ': ' View/accountcenter ',                    ' Docking ': ' view/docking ',                    ' templateuploadctr ': ' view/templateuploadctr '}, shim:{' Vue ': {exports:' Vue '                   },                    ' Basiclib ': [' jquery '],                    ' Bootstrap ': [' jquery '],                    ' Ajaxfileupload ': [' jquery '],                    ' Sortablejs ': [' vue ']}, Optimizeallpluginresources:true, Name:reqname, out:' dist/v1/js/' +name}}; });

Then initialize the configuration and load the registration task

grunt.initconfig ({    requirejs:requirejsoptions}) grunt.loadnpmtasks (' Grunt-contrib-requirejs '); Grunt.registertask (' Default ', [' Requirejs ']);

Since I have ES6 syntax in my code, I convert the ES6 syntax into ES5 after merging, and then remove the annotations in the compression.

The overall configuration code is as follows:

Module.exports =function(grunt) {//r.js Packaging Preparation    varFiles = Grunt.file.expand (' resources/v1/js/*.js '); varRequirejsoptions = {};//the object used to store the packaged configuration    //traversing FilesFiles.foreach (function(File,index,array) {varName = file.substring (File.lastindexof ('/') + 1); varReqname = Name.replace (/\.js$/, ");        Console.log (name); varfilename = ' Requirejs ' +index; Requirejsoptions[filename]={options: {baseUrl:"Resources/v1/js", paths:{"jquery": ' Base/jquery-1.11.3.min ',                    ' Vue ': ' Base/vue.min ',                    "Vuedraggable": ' Base/vuedraggable ',                    ' Bootstrap ': ' Base/bootstrap.min ',                    "Sortablejs": ' Base/sortable ',                    "Basiclib": ' Widgets/basiclib ',                    ' msg ': ' Widgets/msg ',                    ' BaseUrl ': ' Widgets/baseurl ',                    ' Common ': ' Widgets/common ',                    "Ajaxfileupload": ' Widgets/ajaxfileupload ',                    ' Document ': ' Widgets/document ',                    "Comp": ' Widgets/comp ',                    ' Header ': ' Module/header ',                    ' Accountcenter ': ' View/accountcenter ',                    ' Docking ': ' view/docking ',                    ' templateuploadctr ': ' view/templateuploadctr '}, shim:{' Vue ': {exports:' Vue '                   },                    ' Basiclib ': [' jquery '],                    ' Bootstrap ': [' jquery '],                    ' Ajaxfileupload ': [' jquery '],                    ' Sortablejs ': [' vue ']}, Optimizeallpluginresources:true, Name:reqname, out:' dist/v1/js/' +name}};        }); //Configuration ParametersGrunt.initconfig ({Pkg:grunt.file.readJSON (' Package.json '), Requirejs:requirejsoptions, watch: {js: {files:[' Resources/**/*.js '], tasks:[' Default '], Options: {livereload:false}}, babel:{files:' Resources/**/*.js ', tasks:[' Babel ']}}, jshint:{build:[' Resources/**/*.js '], options:{jshintrc:'. Jshintrc '//Error detecting JS code}}, copy: {/*main: {expand:true, CWD: ' src ', src: ' * * ', dest: ' dist/', },          */main:{files:[{expand:true, CWD: ' resources/v1/css/', src: ' * * ', dest: ' dist/v1/css/'}, {expand:true, CWD: ' resources/v1/fonts/', src: ' * * ', dest: ' dist/v1/fonts/'}, {expand:true, CWD: ' resources/v1/images/', src: ' * * ', dest: ' dist/v1/images/'}, {expand:true, CWD: ' resources/v1/js/base/', src: ' * * ', dest: ' dist/v1/js/base/'}]}, Babel: {options: {sourcemap :false, presets: [' Babel-preset-es2015 ']}, Dist: {files: [{expand:true, CWD:' dist/v1/js/',//JS Directorysrc:[' *.js '),//All JS filesDest: ' dist/v1/js/'//output to this directory}]}, Uglify: {options: {mangle: 
    true,//confusing variable namesComments: ' False '//False (Delete all comments), some (keep notes such as @preserve @license @cc_on)}, My_target: {files: [{expand:true, CWD:' dist/v1/js/',//JS Directorysrc:[' *.js '),//All JS filesDest: ' dist/v1/js/'//output to this directory                 }]             }         }            }); //load uglify plugin, compress JSGrunt.loadnpmtasks (' Grunt-contrib-copy '); Grunt.loadnpmtasks (' Grunt-babel '); //grunt.loadnpmtasks (' Grunt-contrib-jshint ');Grunt.loadnpmtasks (' grunt-contrib-uglify '); Grunt.loadnpmtasks (' Grunt-contrib-requirejs '); Grunt.loadnpmtasks (' Grunt-contrib-watch '); //Registering TasksGrunt.registertask (' Default ', [' Copy ', ' Requirejs ', ' Babel ', ' uglify ']); Grunt.registertask (' Watcher ', [' Watch ']); }  

Reference Address:

Use Grunt to complete Requirejs merge compression and JS file version control

Requirejs Multi-page, multi-JS packaging code, REQUIREJS Multi-Pack "collection"

Requirejs Multi-page, multi-entry JS file Packaging summary