前端开发中，使用合适的项目结构能够让代码更加清晰易读、维护方便。本文将介绍一种前端项目结构，同时结合 grunt.js 和 RequireJS 实现 JS 文件的合并和模块化管理。
项目结构
-- -------------------- ---- ------- --- ----- - --- ---- - --- --- --- ---- - --- --- - - --- ---- - - - --- ------- - - - --- --------- - - - --- ------ - - - - --- ----------- - - - - --- ------------ - - - --- ------- - - - --- ------------ - - - --- ------------- - - --- ---- - - --- --------- - --- ----- --- ------------ --- ---------- --- ------------
dist/: 存储打包后生成的文件，分别有 CSS 和 JS。src/js/app/: 存储应用程序的代码，包括主入口文件main.js、路由router.js、视图views/和模型models/。src/js/lib/: 存储第三方库和插件。src/js/config.js: RequireJS 配置文件。Gruntfile.js: Grunt.js 的任务配置文件。
依赖库
在项目中我们会用到以下库：
- RequireJS：前端模块化加载器
- Grunt.js：一个 JavaScript 任务运行器
- grunt-contrib-uglify：压缩 JS 文件
- grunt-contrib-less：编译 LESS 文件
- grunt-contrib-watch：实时监测文件修改并执行任务
Grunt 配置
在 Gruntfile.js 中配置任务：
-- -------------------- ---- -------
-------------- - --------------- -
------------------
---- ------------------------------------
-- -- -- --
------- -
-------- -
------- ---- --- -------- -- --- ---------------------------------- -- -----
--
------ -
---- ---------------------
----- ---------------------
-
--
-- -- ---- --
----- -
------------ -
-------- -
------ ------------
--
------ -
---------------------- ----------------------
-
-
--
-- -------------
------ -
-------- -
------ -------------------
------ ----------
--
---- -
------ -----------------------
------ --------
-
-
---
-- -- ----- --
-------------------------------------------
-----------------------------------------
------------------------------------------
-- -- ----- ----
----------------------------- -----------
--这里我们定义了三个任务：uglify、less 和 watch。其中 uglify 和 less 分别用于压缩 JS 文件和编译 LESS 文件，watch 则是实时监测文件修改并执行相应任务。
RequireJS 配置
在 src/js/config.js 中配置 RequireJS：
requirejs.config({
baseUrl: 'js',
paths: {
jquery: 'lib/jquery.min'
}
});我们在这里定义了 RequireJS 的基本配置信息，如模块根路径、依赖库的别名等。这里以 jQuery 库为例，指定其路径为 `lib/jquery.min.js
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25907