使用requirejs搭建前端项目

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用requirejs搭建前端项目相关的知识,希望对你有一定的参考价值。

参考技术A 本文主要是讲述如何使用requirejs这个模块化管理工具来搭建前端项目结构,适合内网开发以及还在使用比较旧的技术栈(如jQuery)的前端同学。
github地址: https://github.com/duwenbin0316/Requirejs-demo.git ,如果对你有帮助,请点个star,谢谢!
requirejs的使用我就一笔带过,主要是讲如何搭建项目结构。
项目基本目录结构如下:

在index.html中引入requirejs本身以及主js文件:

index.js定义了模块的名称和路径,以及模块所需的依赖,并调用了main模块的start方法:

main.js为应用主模块,调用main.start()执行应用初始化,所有的dom创建都在模块内部处理,index.html中只有一个div#main的dom元素。main.js内容如下:

同时在main.js中调用了header模块的start方法。

项目结构按照该思路一层一层构建,简单明了,当然也可以根据个人习惯提取出一些通用的组件,本文就不再赘述。

以上是关于使用requirejs搭建前端项目的主要内容,如果未能解决你的问题,请参考以下文章

使用maven结合requirejs管理前端脚本

前端模块化:RequireJs

利用yeoman快速搭建React+webpack+es6脚手架

gulp解决RequireJS

使用模块化思维和模板引擎搭建前端架构(require+underscore)

jQuery项目赋予Router