[도구 설정] requirejs 다 중 페이지, 다 중 입구 js 파일 패키지 요약

다음 과 같은 몇 가 지 를 명 확 히 해 야 한다.
1. 로 컬 전단 디 버 깅 코드 는 원본 경로 와 코드 를 호출 하 는 것 이 분명 하지만 온라인 에서 실행 되 는 것 은 포장 을 통 해 다른 경로 일 것 입 니 다. 여기 가 바로 생 성 된 dist 폴 더 입 니 다.
2. requirejs 의 도입, 온라인 과 오프라인 경 로 는 어떻게 제어 합 니까?우 리 는 이렇게 제어 합 니 다. 코드 는 다음 과 같 습 니 다.

이 ${resource} 은 서버 제어 가 페이지 에 전 달 된 것 입 니 다. 로 컬 디 버 깅 에서 이 ${resource} 의 값 은 / resource / v1 / 입 니 다.그럼 온라인 에 도착 하면 이 값 은 / dist / v1 / 입 니 다.그래서 이 js 온라인 과 오프라인 의 호흡 이 완성 되 었 습 니 다.로 컬 디 버 깅 은 / resource / v1 / 아래 자원 을 호출 합 니 다. 온라인 상에 서 는 / dist / v1 / 아래 자원 입 니 다. 물론 이 v1 은 불필요 합 니 다. 그 당시 에는 주로 버 전 발표 에 추 가 된 버 전 번 호 를 만 들 기 위해 서 였 습 니 다.
리 소스 / v1 / js / 아래 의 입구 파일 을 어떻게 포장 하 는 지 한 걸음 한 걸음 설명 하 겠 습 니 다.
먼저 나의 모든 입구 파일 이 어디 에 있 는 지 보 세 요. 그림 과 같 습 니 다.
이 js 들 은 resource / v1 / js / 아래 에 있 습 니 다.
입 구 는 현재 11 개의 js 파일 이 있 으 며, 도 입 된 모듈 을 모두 각자 의 입구 js 에 포장 해 야 한다.
첫 번 째 단 계 는 copy 원시 자원 중의 fonts, images, css 와 js 중의 base 아래 의 js 입 니 다. 그 중에서 base 아래 의 js 파일 은 주로 기본 적 인 라 이브 러 리 이 고 requirejs 라 이브 러 리 등 을 포함 합 니 다.dist 폴 더 로 복사 합 니 다.
복사 하 는 역할 은 온라인 상에 서도 dist 아래 fonts, images, 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/'}
              ]
          }
        }

두 번 째 단 계 는 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 다 중 포장 [소장]