Detailed explanation of examples of multi-entry js file packaging-JS Tutorial-php.cn

The following points need to be made clear:

1. The local front-end debugging code must call the original path and code, but the online operation must be through another packaged path. Here is the generated dist folder.

2. With the introduction of requirejs, how to control the online and offline paths? This is how we control it. The code is as follows:

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

Copy after login

This${resource} is controlled by the server and passed to the page. Debugging this locally The value of ${resource} is /resource/v1/; Then the value online is /dist/v1/. So the cooperation between online and offline js is completed. Local debugging calls resources under /resource/v1/, and online resources under /dist/v1/. Of course, v1 is actually redundant. At that time, it was mainly a version number added for version release.

#Now we will explain step by step how to package all the entry files under resource/v1/js/.

First take a look at where all my entry files are, as shown in the picture:

#These js are under resource/v1/js/.

The entrance now has 11 js files, and all imported modules need to be packaged into their respective entrance js.

The first step is to copy the fonts, images, css in the original resources and the js under the base in js. The js files under the base are mainly basic libraries, including requirejs library, etc. Copy to the dist folder.

The purpose of copying is that I also need the fonts, images, and css under dist online.

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/'}
              ]
          }
        }

Copy after login

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

// r.js 打包准备var files = grunt.file.expand('resources/v1/js/*.js');var requirejsOptions = {}; //用来存储 打包配置的对象//遍历文件files.forEach(function(file,index,array) {var name = file.substring(file.lastIndexOf('/') + 1);var reqname = name.replace(/\.js$/,'');
        console.log(name);var filename = '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
            }
        };    
    });

Copy after login

Then initialize the configuration and load the registration task

grunt.initConfig({
    requirejs: requirejsOptions
})

grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.registerTask('default', ['requirejs']);

Copy after login

Since my code has es6 syntax, so after merging The es6 syntax is converted to es5; then comments and other comments are removed during compression.

The total configuration code is as follows:

    module.exports = function(grunt) {  // r.js 打包准备var files = grunt.file.expand('resources/v1/js/*.js');var requirejsOptions = {}; //用来存储 打包配置的对象//遍历文件files.forEach(function(file,index,array) {var name = file.substring(file.lastIndexOf('/') + 1);var reqname = name.replace(/\.js$/,'');
        console.log(name);var filename = '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
            }
        };    
    });    //配置参数      grunt.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' //检测JS代码错误            }
        },
        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目录下   src:['*.js'], //所有js文件   dest:'dist/v1/js/'  //输出到此目录下                 }] 
            }
        },

        
        uglify: {  
            options: {
                mangle: true, //混淆变量名comments: 'false' //false（删除全部注释），some（保留@preserve @license @cc_on等注释）            },  
            my_target: {
                 files: [{
                   expand:true,
                   cwd:'dist/v1/js/', //js目录下   src:['*.js'], //所有js文件   dest:'dist/v1/js/'  //输出到此目录下                 }] 
            } 
        }
        
    });  
      
      //载入uglify插件，压缩js   grunt.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');      
      //注册任务  grunt.registerTask('default', ['copy','requirejs','babel','uglify']);
      grunt.registerTask('watcher',['watch']);
    }

Copy after login

Reference address:

Use grunt to complete the merge and compression of requirejs and the version control of js files

requirejs Multiple pages, multiple js packaging codes, requirejs many-to-many packaging [Collection]

The above is the detailed content of Detailed explanation of examples of multi-entry js file packaging. For more information, please follow other related articles on the PHP Chinese website!