다음 사항을 명확히 해야 합니다.
1. 로컬 프런트 엔드 디버깅 코드는 원래 경로와 코드를 호출해야 하지만 온라인 작업은 생성된 dist 폴더를 통해 이루어져야 합니다.
2. requirejs가 도입되면서 온라인과 오프라인 경로를 어떻게 제어할 수 있나요? 이것이 우리가 제어하는 방법입니다.
<script src="${resource}/js/base/require.js?1.1.11" data-main="${resource}/js/accountMain"></script>이 ${resource}는 서버에 의해 제어되고 페이지로 전달됩니다. 로컬에서 디버깅할 때 이 ${resource}의 값은 다음과 같습니다. is /resource/v1/ ;그러면 온라인 값은 /dist/v1/입니다. 이로써 온라인과 오프라인 js 간의 협력이 완료되었습니다. 로컬 디버깅은 /resource/v1/ 아래에 리소스를 호출하고, /dist/v1/ 아래에 온라인 리소스를 호출합니다. 물론 v1은 실제로 당시에는 주로 버전 릴리스를 위해 추가된 버전 번호였습니다.
이제 리소스/v1/js/ 아래에 모든 항목 파일을 패키징하는 방법을 단계별로 설명하겠습니다.
먼저 그림과 같이 모든 항목 파일이 어디에 있는지 살펴보세요.
이 js는 resources/v1/js/ 아래에 있습니다.
이제 입구에는 11개의 js 파일이 있으며 가져온 모든 모듈은 해당 입구 js로 패키징되어야 합니다.
첫 번째 단계는 원본 리소스의 글꼴, 이미지, CSS와 베이스 아래의 js를 js에 복사하는 것입니다. 베이스 아래의 js 파일은 주로 requirejs 라이브러리 등을 포함한 기본 라이브러리입니다. dist 폴더에 복사하세요.
복사하는 목적은 온라인 dist 아래의 글꼴, 이미지, 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 Many-to -다양한 포장 [Favorite] 】
위 내용은 다중 항목 js 파일 패키징의 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
