Explication détaillée d'exemples d'empaquetage de fichiers js à entrées multiples

Les points suivants doivent être clairs :

1. Le code de débogage frontal local doit appeler le chemin et le code d'origine, mais l'opération en ligne doit passer par un autre chemin packagé. dossier dist.

2. Avec l'introduction de requirejs, comment contrôler les chemins en ligne et hors ligne ? Voici comment nous le contrôlons. Le code est le suivant :

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

Cette ${ressource} est contrôlée par le serveur et transmise à la page. Déboguer ceci localement${resource} est /resource/v1/ alors la valeur en ligne est /dist/v1/; La coopération entre js en ligne et hors ligne est ainsi terminée. Le débogage local appelle les ressources sous /resource/v1/ et les ressources en ligne sous /dist/v1/. Bien sûr, la v1 est en fait redondante. À cette époque, il s'agissait principalement d'un numéro de version ajouté pour la sortie de la version.

Ci-dessous, nous expliquerons étape par étape comment regrouper tous les fichiers d'entrée sous ressource/v1/js/.

Jetez d'abord un œil à l'endroit où se trouvent tous mes fichiers d'entrée, comme indiqué sur l'image :

Ces js sont sous ressource/v1/js/.

L'entrée contient désormais 11 fichiers js, et tous les modules importés doivent être empaquetés dans leur js d'entrée respectif.

Dans la première étape, j'ai copié les polices, les images, les css dans les ressources d'origine et les js sous la base dans js. Les fichiers js sous la base sont principalement des bibliothèques de base, dont la bibliothèque requirejs, etc. Copiez dans le dossier dist.

Le but de la copie est que j'ai également besoin des polices, des images et des CSS sous dist en ligne.

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

La deuxième étape consiste à empaqueter le fichier d'entrée via

. Le fichier de configuration est le suivant : grunt-contrib-requirejs

// 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
            }
        };    
    });

Ensuite initialisez la configuration et chargez la tâche d'enregistrement

grunt.initConfig({
    requirejs: requirejsOptions
})

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

Puisqu'il y a es6 syntaxe dans mon code, donc après la fusion, convertissez la syntaxe es6 en es5 puis compressez et supprimez les commentaires et ainsi de suite.

Le code de configuration total est le suivant :

    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']);
    }

Adresse de référence :

Utilisez Grunt pour terminer la fusion et la compression de requirejs et du le contrôle de version des fichiers js

nécessite plusieurs pages, plusieurs codes d'emballage js, nécessite un emballage plusieurs-à-plusieurs [Collection]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!