複数エントリのjsファイルのパッケージ化例を詳しく解説

以下の点を明確にする必要があります:

1. ローカル フロントエンド デバッグ コードは元のパスとコードを呼び出す必要がありますが、オンライン操作は別のパッケージ化されたパスを介して行う必要があります。これは生成された dist フォルダーです。

2. requirejs の導入により、オンラインとオフラインのパスを制御するにはどうすればよいですか?コードは次のとおりです:

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

この ${resource} はサーバーによって制御され、ローカルでデバッグするときにこの ${resource} の値がページに渡されます。 /resource/v1/ ;その場合、online の値は /dist/v1/ になります。これでオンラインとオフラインのjsの連携が完了しました。ローカル デバッグでは、/resource/v1/ 下のリソースが呼び出され、/dist/v1/ 下のオンライン リソースが呼び出されます。もちろん、当時、v1 は主にバージョン リリースのために追加されたバージョン番号でした。

次に、resource/v1/js/ にあるすべてのエントリ ファイルをパッケージ化する方法をステップバイステップで説明します。

まず、図に示すように、すべてのエントリ ファイルがどこにあるかを確認してください:

これらの js は resource/v1/js/ の下にあります。

入口には 11 個の js ファイルがあり、インポートされたすべてのモジュールをそれぞれの入口 js にパッケージ化する必要があります。

最初のステップは、元のリソースのフォント、画像、CSS と、ベースの下の js を js にコピーすることです。ベースの下の js ファイルは、requirejs ライブラリなどを含む、主に基本的なライブラリです。 dist フォルダーにコピーします。

コピーの目的は、dist online のフォント、画像、CSS も必要であることです。

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

2 番目のステップは、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
            }
        };    
    });

次に、設定を初期化し、登録タスクをロードします

grunt.initConfig({
    requirejs: requirejsOptions
})

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

コードに es6 構文があるため、マージ後に es6 構文を es5 に変換し、その後のコメントを削除します。の圧縮。

全体の構成コードは次のとおりです:

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

参考アドレス:

grunt を使用して requirejs マージ圧縮と js ファイルのバージョン管理を完了します

requirejs マルチページ、マルチ js パッケージ化コード、requirejs many-to - 多数のパッケージ [コレクション] 】

以上が複数エントリのjsファイルのパッケージ化例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。