本发明涉及web开发技术领域，具体而言，涉及一种web前端开发项目搭建的方法及系统。
背景技术：
在网站开发和运行过程中，需要搭建web前端开发环境，对存在问题的内容进行修改和调试，现有技术中，web前端开发环境常常需要用到内容分发网络服务，访问网页时会附带访问很多资源文件，比如js和css文件等，互联网时代不可缺少的两门语言即js脚本语言和css层叠样式表，web前端开发也是开发web应用不可缺少的重要部分。
在复杂的互联网应用环境中，如何提高js、css语言本身的使用灵活性，及如何构建一套属于web前端开发的项目搭建快速方法，是提高开发效率的重要途径，较为原始的搭建web前端方法即将项目中需要用到的资源文件，按照使用顺序以html标签形式引入。该方法简单明了，代码易懂，但是明显的缺点为浏览器加载网页时需要访问数次服务器，请求这些资源文件，这无疑是损耗性能的。
因此，如何减少页面中对js、css内容的请求次数，解决代码文件中的相互引用造成的代码冗余成为了关键问题。
技术实现要素：
本发明旨在至少解决现有技术或相关技术中存在的技术问题之一。
为此，本发明的一个目的在于提出了一种web前端开发项目搭建的方法。
本发明的另一个目的在于提出了一种web前端开发项目搭建的系统。
有鉴于此，根据本发明的一个目的，提出了一种web前端开发项目搭建的方法，包括：通过script标签加载项目主模块；定义项目主模块的依赖模块的加载特征；定义依赖模块的加载路径；加载依赖模块；将加载完成的依赖模块合并至同一文件中。
本发明提供的web前端开发项目搭建的方法，通过script标签加载项目主模块，定义项目主模块的依赖模块的加载特征，定义依赖模块的加载路径，加载依赖模块，将加载完成的依赖模块合并至同一文件中，解决js语言和css语言本身不够灵活的现状，使得web前端开发人员能像后端开发人员一样使用其它高级语言，提高web前端开发效率，解决传统的一个页面需要引用多个js/css资源文件，降低浏览器对资源的请求次数，减轻服务压力。
根据本发明的上述web前端开发项目搭建的方法，还可以具有以下技术特征：
在上述技术方案中，优选地，通过script标签加载项目主模块，具体包括：将script标签设置在网页底部；或利用async属性或defer关键字改写所述script标签；加载项目主模块的主要入口代码。
在该技术方案中，通过script标签加载项目主模块具体包括：将script标签设置在网页底部，或利用async属性或defer关键字改写所述script标签，加载项目主模块的主要入口代码，避免网页失去响应。具体地，ie不支持async属性，只支持defer关键字。
在上述技术方案中，优选地，定义项目主模块的依赖模块的加载特征，具体包括：当依赖模块为非amd(asynchronousmoduledefinition，异步模块定义)规范模块时，定义依赖模块的exports值及deps数组。
在该技术方案中，定义项目主模块的依赖模块的加载特征，具体包括：当依赖模块为非amd规范模块时，定义依赖模块的exports值及deps数组，exports值及deps数组为shim属性，专门用来配置不兼容的模块，exports值为依赖模块外部调用时的名称，deps数组为依赖模块的依赖性。
在上述技术方案中，优选地，定义依赖模块的加载路径，具体包括：当依赖模块在js子目录中时，将依赖模块的加载路径定义为js子目录；当依赖模块不在js子目录中时，通过逐一指定路径或改变基目录，将依赖模块的加载路径定义为相应目录。
在该技术方案中，定义依赖模块的加载路径具体包括：当依赖模块在js子目录中时，将依赖模块的加载路径定义为js子目录，当依赖模块不在js子目录中而在其他目录中时，通过逐一指定路径或直接改变基目录，将依赖模块的加载路径定义为相应目录，paths属性指定各个模块的加载路径。
在上述技术方案中，优选地，还包括：当依赖模块存在于其它主机时，将依赖模块的加载路径定义为主机网址。
在该技术方案中，当依赖模块存在于另外一台主机时，将依赖模块的加载路径定义为主机网址，能够灵活使用js、css语言进行模块化开发和集成。
根据本发明的另一个目的，提出了一种web前端开发项目搭建的系统，包括：加载单元，用于通过script标签加载项目主模块；定义单元，用于定义项目主模块的依赖模块的加载特征；以及定义依赖模块的加载路径；加载单元，还用于加载依赖模块；合并单元，用于将加载完成的依赖模块合并至同一文件中。
本发明提供的web前端开发项目搭建的系统，加载单元通过script标签加载项目主模块，定义单元定义项目主模块的依赖模块的加载特征，定义依赖模块的加载路径，加载单元加载依赖模块，合并单元将加载完成的依赖模块合并至同一文件中，解决js语言和css语言本身不够灵活的现状，使得web前端开发人员能像后端开发人员一样使用其它高级语言，提高web前端开发效率，解决传统的一个页面需要引用多个js/css资源文件，降低浏览器对资源的请求次数，减轻服务压力。
根据本发明的上述web前端开发项目搭建的系统，还可以具有以下技术特征：
在上述技术方案中，优选地，加载单元，具体用于：将script标签设置在网页底部；或利用async属性或defer关键字改写script标签；加载项目主模块的主要入口代码。
在该技术方案中，加载单元将script标签设置在网页底部，或利用async属性或defer关键字改写所述script标签，加载项目主模块的主要入口代码，避免网页失去响应。具体地，ie不支持async属性，只支持defer关键字。
在上述技术方案中，优选地，定义单元，具体用于：当依赖模块为非amd规范模块时，定义依赖模块的exports值及deps数组。
在该技术方案中，定义单元当依赖模块为非amd规范模块时，定义依赖模块的exports值及deps数组，exports值及deps数组为shim属性，专门用来配置不兼容的模块，exports值为依赖模块外部调用时的名称，deps数组为依赖模块的依赖性。
在上述技术方案中，优选地，定义单元，还用于：当依赖模块在js子目录中时，将依赖模块的加载路径定义为js子目录；当依赖模块不在js子目录中时，通过逐一指定路径或改变基目录，将依赖模块的加载路径定义为相应目录。
在该技术方案中，定义单元当依赖模块在js子目录中时，将依赖模块的加载路径定义为js子目录，当依赖模块不在js子目录中而在其他目录中时，通过逐一指定路径或直接改变基目录，将依赖模块的加载路径定义为相应目录，paths属性指定各个模块的加载路径。
在上述技术方案中，优选地，定义单元，还用于：当依赖模块存在于其它主机时，将依赖模块的加载路径定义为主机网址。
在该技术方案中，定义单元当依赖模块存在于另外一台主机时，将依赖模块的加载路径定义为主机网址，能够灵活使用js、css语言进行模块化开发和集成。
本发明的附加方面和优点将在下面的描述部分中变得明显，或通过本发明的实践了解到。
附图说明
本发明的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解，其中：
图1示出了本发明的一个实施例的web前端开发项目搭建的方法的流程示意图；
图2示出了本发明的一个实施例的web前端开发项目搭建的系统的示意框图；
图3示出了本发明的一个具体实施例的amd模块概念示意图。
具体实施方式
为了能够更清楚地理解本发明的上述目的、特征和优点，下面结合附图和具体实施方式对本发明进行进一步的详细描述。需要说明的是，在不冲突的情况下，本申请的实施例及实施例中的特征可以相互组合。
在下面的描述中阐述了很多具体细节以便于充分理解本发明，但是，本发明还可以采用其他不同于在此描述的其他方式来实施，因此，本发明的保护范围并不限于下面公开的具体实施例的限制。
本发明第一方面的实施例，提出一种web前端开发项目搭建的方法，图1示出了本发明的一个实施例的web前端开发项目搭建的方法的流程示意图：
步骤102，通过script标签加载项目主模块；
步骤104，定义项目主模块的依赖模块的加载特征；
步骤106，定义依赖模块的加载路径；
步骤108，加载依赖模块；
步骤110，将加载完成的依赖模块合并至同一文件中。
本发明提供的web前端开发项目搭建的方法，通过script标签加载项目主模块，定义项目主模块的依赖模块的加载特征，定义依赖模块的加载路径，加载依赖模块，将加载完成的依赖模块合并至同一文件中，解决js语言和css语言本身不够灵活的现状，使得web前端开发人员能像后端开发人员一样使用其它高级语言，提高web前端开发效率，解决传统的一个页面需要引用多个js/css资源文件，降低浏览器对资源的请求次数，减轻服务压力。
在本发明的一个实施例中，如图1所示，优选地，步骤102，通过script标签加载项目主模块，具体包括：
步骤1022，将script标签设置在网页底部；或利用async属性或defer关键字改写所述script标签；
步骤1024，加载项目主模块的主要入口代码。
在该实施例中，通过script标签加载项目主模块具体包括：将script标签设置在网页底部，或利用async属性或defer关键字改写所述script标签，加载项目主模块的主要入口代码，避免网页失去响应。具体地，ie不支持async属性，只支持defer关键字。
在本发明的一个实施例中，优选地，步骤104，定义项目主模块的依赖模块的加载特征，具体包括：当依赖模块为非amd规范模块时，定义依赖模块的exports值及deps数组。
在该实施例中，定义项目主模块的依赖模块的加载特征，具体包括：当依赖模块为非amd规范模块时，定义依赖模块的exports值及deps数组，exports值及deps数组为shim属性，专门用来配置不兼容的模块，exports值为依赖模块外部调用时的名称，deps数组为依赖模块的依赖性。
在本发明的一个实施例中，如图1所示，优选地，步骤106，定义依赖模块的加载路径，具体包括：
步骤1060，判断依赖模块是否在js子目录中；
步骤1062，当依赖模块在js子目录中时，将依赖模块的加载路径定义为js子目录；
步骤1064，当依赖模块不在js子目录中时，判断依赖模块是否存在于其它主机；
步骤1066，当依赖模块存在于其它主机时，将依赖模块的加载路径定义为主机网址；
步骤1068，当依赖模块不存在于其它主机时，通过逐一指定路径或改变基目录，将依赖模块的加载路径定义为相应目录。
在该实施例中，定义依赖模块的加载路径具体包括：当依赖模块在js子目录中时，将依赖模块的加载路径定义为js子目录，当依赖模块不在js子目录中而在其他目录中时，通过逐一指定路径或直接改变基目录，将依赖模块的加载路径定义为相应目录，paths属性指定各个模块的加载路径。当依赖模块存在于另外一台主机时，将依赖模块的加载路径定义为主机网址，能够灵活使用js、css语言进行模块化开发和集成。
本发明第二方面的实施例，提出一种web前端开发项目搭建的系统200，图2示出了本发明的一个实施例的web前端开发项目搭建的系统200的示意框图：
加载单元202，用于通过script标签加载项目主模块；
定义单元204，用于定义项目主模块的依赖模块的加载特征；以及定义依赖模块的加载路径；
加载单元202，还用于加载依赖模块；
合并单元206，用于将加载完成的依赖模块合并至同一文件中。
本发明提供的web前端开发项目搭建的系统200，加载单元202通过script标签加载项目主模块，定义单元204定义项目主模块的依赖模块的加载特征，定义依赖模块的加载路径，加载单元202加载依赖模块，合并单元206将加载完成的依赖模块合并至同一文件中，解决js语言和css语言本身不够灵活的现状，使得web前端开发人员能像后端开发人员一样使用其它高级语言，提高web前端开发效率，解决传统的一个页面需要引用多个js/css资源文件，降低浏览器对资源的请求次数，减轻服务压力。
在本发明的一个实施例中，优选地，加载单元202，具体用于：将script标签设置在网页底部；或利用async属性或defer关键字改写script标签；加载项目主模块的主要入口代码。
在该实施例中，加载单元202将script标签设置在网页底部，或利用async属性或defer关键字改写所述script标签，加载项目主模块的主要入口代码，避免网页失去响应。具体地，ie不支持async属性，只支持defer关键字。
在本发明的一个实施例中，优选地，定义单元204，具体用于：当依赖模块为非amd规范模块时，定义依赖模块的exports值及deps数组。
在该实施例中，定义单元204当依赖模块为非amd规范模块时，定义依赖模块的exports值及deps数组，exports值及deps数组为shim属性，专门用来配置不兼容的模块，exports值为依赖模块外部调用时的名称，deps数组为依赖模块的依赖性。
在本发明的一个实施例中，优选地，定义单元204，还用于：当依赖模块在js子目录中时，将依赖模块的加载路径定义为js子目录；当依赖模块不在js子目录中时，通过逐一指定路径或改变基目录，将依赖模块的加载路径定义为相应目录。
在该实施例中，定义单元204当依赖模块在js子目录中时，将依赖模块的加载路径定义为js子目录，当依赖模块不在js子目录中而在其他目录中时，通过逐一指定路径或直接改变基目录，将依赖模块的加载路径定义为相应目录，paths属性指定各个模块的加载路径。
在本发明的一个实施例中，优选地，定义单元204，还用于：当依赖模块存在于其它主机时，将依赖模块的加载路径定义为主机网址。
在该实施例中，定义单元204当依赖模块存在于另外一台主机时，将依赖模块的加载路径定义为主机网址，能够灵活使用js、css语言进行模块化开发和集成。
本发明的具体实施例：
requirejs是一个开源的js文件和模块框架，支持浏览器和node.js的服务器环境，使用requirejs可以顺序读取仅需要相关依赖模块，requirejs的原理是当使用script标签加载所依赖的资源文件时，将这些依赖通过head.appendchild()函数来加载，当依赖加载以后，计算出模块定义的顺序，并按正确的顺序进行调用。
javascript模块遵循srp(singleresponsibilityprinciple，单一职责原则)的代码段，它暴露了一个公开的api(applicationprogramminginterface，应用程序编程接口)。在现今javascript开发中，可以在模块中封装许多功能，而且在大多数项目中，每个模块都有其自己的文件，这使得开发者需要持续不断的关注模块之间的依赖性，并按照一个特定的顺序加载这些模块，否则运行时将会发生错误。当加载javascript模块时，使用script标签，为了加载依赖的模块，需要先加载被依赖的模块。使用script标签时，需要按照此特定顺序安排它们的加载，而且脚本的加载是同步的。可以使用async和defer关键字使得加载异步，但可能因此在加载过程中丢失加载的顺序。
commonjs的与会者决定制定出了javascript语言工作的模块格式，未限制绑定到浏览器js环境。commonjs的小组能够制定出相关性参考、解决如何处理循环依赖问题以及解决如何获取有关当前模块的特性问题。但其仍然会影响模块的网络负载、固有的异步性的设计。eval调试或调试多个文件时有实际的弱点，并且使用commonjs的模块中最常见的js环境时，浏览器并非运行于最优性能。
amd的格式比commonjs更好，其编写隐式依赖模块很容易直接在浏览器中使用。图3示出了本发明的一个具体实施例的amd模块概念示意图，它是通过网络现行的“全局和脚本标签”，因为使用字符串id为依赖的commonjs的做法。依赖的明确宣示避免使用全局变量。id可以映射到不同的路径。封装模块定义提供了工具，以避免污染全局命名空间。清除路径定义模块值，使用“返回值”或者commonjs的“出口”，这对循环依赖非常有用，相比在commonjs的模块，它能够更好地使浏览器工作。
本发明的web前端开发项目搭建的系统包括：
(1)项目主模块的加载
在主页面中使用标签<scriptsrc＝"js/require.js"></script>，为避免网页失去响应，将其放在网页底部加载，或进行如下改写：<scriptsrc＝"js/require.js"deferasync＝"true"></script>，其中，async属性表明需要异步加载，避免网页失去响应，ie不支持async属性，只支持defer。其次，加载项目主要入口代码，假定是main.js，在js目录下，则如下改写标签：<scriptsrc＝"js/require.js"data-main＝"js/main"></script>，data-main属性指定网页程序的主模块。
(2)依赖模块的加载
若项目主模块的依赖模块是['jquery','underscore','backbone']，默认情况下，require.js假定这三个模块与main.js在同一个目录，文件名分别为jquery.js，underscore.js和backbone.js，然后自动加载。
使用require.config()方法，可以对模块的加载行为进行自定义。require.config()就写在主模块(main.js)的头部，参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。
(3)自定义模块
理论上require.js加载的模块，必须是按照amd规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库(比如jquery)符合amd规范，更多的库并不符合，因此require.js也能够加载非规范的模块。
非规范的模块在用require()加载之前，要先用require.config()方法，定义其一些特征，举例来说，underscore和backbone这两个没有采用amd规范编写的库，在加载时必须先定义特征，require.config()接受一个配置对象，这个对象除了有paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。每个模块要定义(1)exports值(输出的变量名)，表明这个模块外部调用时的名称；(2)deps数组，表明该模块的依赖性。
在本说明书的描述中，术语“一个实施例”、“一些实施例”、“具体实施例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或实例。而且，描述的具体特征、结构、材料或特点可以在任何的一个或多个实施例或示例中以合适的方式结合。
以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。