Ausführliche Erläuterung von Beispielen für die Verpackung von JS-Dateien mit mehreren Einträgen

Die folgenden Punkte müssen klargestellt werden:

1. Der lokale Front-End-Debugging-Code muss den ursprünglichen Pfad und Code aufrufen, der Online-Vorgang muss jedoch über einen anderen gepackten Pfad erfolgen dist-Ordner.

2. Wie können mit der Einführung von requirejs die Online- und Offline-Pfade gesteuert werden? So steuern wir es. Der Code lautet wie folgt:

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

Diese ${Ressource} wird vom Server gesteuert und an die Seite übergeben. Dies lokal debuggen${resource} ist /resource/v1/ , dann ist der Wert online /dist/v1/. Damit ist die Zusammenarbeit zwischen Online- und Offline-JS abgeschlossen. Beim lokalen Debuggen werden Ressourcen unter /resource/v1/ und Online-Ressourcen unter /dist/v1/ aufgerufen. Natürlich ist v1 zu diesem Zeitpunkt hauptsächlich eine Versionsnummer, die für die Versionsfreigabe hinzugefügt wurde.

Nachfolgend erklären wir Ihnen Schritt für Schritt, wie Sie alle Eintragsdateien unter resources/v1/js/ packen.

Schauen Sie sich zunächst an, wo sich alle meine Eintragsdateien befinden, wie im Bild gezeigt:

Diese js befinden sich unter resources/v1/js/.

Der Eingang verfügt jetzt über 11 js-Dateien und alle importierten Module müssen in ihre jeweiligen Eingangs-JS-Dateien gepackt werden.

Im ersten Schritt habe ich die Schriftarten, Bilder, CSS in die Originalressourcen und die JS-Dateien unter der Basis in JS kopiert. Bei den JS-Dateien unter der Basis handelt es sich hauptsächlich um Basisbibliotheken, einschließlich der Requirejs-Bibliothek usw. In den dist-Ordner kopieren.

Der Zweck des Kopierens besteht darin, dass ich auch die Schriftarten, Bilder und CSS unter dist online benötige.

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

Der zweite Schritt besteht darin, die Eintragsdatei über

zu packen. Die Konfigurationsdatei lautet wie folgt: 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
            }
        };    
    });

Dann initialisieren Sie die Konfiguration und laden Sie die Registrierungsaufgabe

grunt.initConfig({
    requirejs: requirejsOptions
})

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

Da es es6 gibt Syntax in meinem Code. Konvertieren Sie also nach dem Zusammenführen die es6-Syntax in es5. Komprimieren und entfernen Sie dann Kommentare usw.

Der gesamte Konfigurationscode lautet wie folgt:

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

Referenzadresse:

Verwenden Sie grunt, um die Zusammenführung und Komprimierung von requirejs und abzuschließen Versionskontrolle von JS-Dateien

erfordert mehrere Seiten, mehrere JS-Verpackungscodes, erfordert viele-zu-viele-Verpackungen [Sammlung]

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für die Verpackung von JS-Dateien mit mehreren Einträgen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!