一种前端资源模块化管理和资源打包配置方法

摘要

本发明涉及web开发技术领域，具体为一种前端资源模块化管理和资源打包配置方法，核心在于把一个页面引用的所有资源文件合成一个文件，目的是减少http请求的次数，让页面的加载和显示更快。这个合并的功能就是打包。这个打包合成阶段是在开发完成之后进行的，并不影响开发阶段模式，在项目资源打包过程中，会分析各个文件之间的依赖关系，生成一个依赖图并用一个文件保存下来，浏览器运行代码的时候就可以读取这个文件。打包过程中，还可以对资源进行优化处理，比如进行资源解析编译、资源压缩等等操作，而且还能很好的对目前主流框架脚手架支持，最终只需使用最后打包生成的一个对应的文件就可以。

说明书

技术领域

本发明涉及web开发技术领域，具体为一种前端资源模块化管理和资源打包配置方法。

背景技术

现有技术的前端页面开发，所有的静态资源css、图片和js都是手动引入HTML页面中，如果一个HTML页面中通过script标签引入了3个js文件，而且要注意引用的顺序，不然页面就会发生错误，浏览器需要发送三次http请求来获取这三个文件，然后依次执行其中的代码，如果其中有一个文件因为网络原因或其他原因而延误了加载时间，那么整个页面的显示也会被延误。当项目引用的js文件增多，有十几个甚至几十个js文件的时候，页面加载肯定就会变得很慢，而且也很难维护。同理，如果一个页面引用多个css文件也存在这样的问题。

发明内容

本发明的目的在于提供一种前端资源模块化管理和资源打包配置方法，解决对多入口文件和多HTML页面的配置打包方法的抽象化，解决根据开发环境和生产环境对所需文件进行功能分离，解决启动本地服务的同时并在本地进行项目打包的功能。

为解决上述技术问题，本使发明一种前端资源模块化管理和资源打包配置方法，包括有如下步骤：

S1. 基于node环境搭建本地前端项目，初始化项目；

S2. 定义一个配置文件，配置文件是一个简单的js模块，主要功能是提供资源打包需要的解析器，将所有的与打包相关的信息放在配置文件中；

S3. 在项目中设定执行脚本，根据设定的脚本执行不同环境的配置文件生成相对应的资源打包产物，便可以直接在浏览器端运行。

进一步的，打包过程会分析各个文件之间的依赖关系，生成一个依赖图并保存，浏览器运行代码时读取保存的文件。

进一步的，遵循不重复的原则保留一个通用配置，通过通用配置，不必在环境特定的配置中重复代码，进行分别配置开发环境或生产环境的配置文件，实现功能职责明确。

进一步的，模块打包入口文件配置在通用配置中，将打包方法封装，全局定义需要进行打包的文件名称，在封装的方法利用正则遍历文件路径名称信息，存储在数组，在打包入口处直接调用封装好的方法即可。

本发明主要核心在于把一个页面引用的所有资源文件合成一个文件，目的是减少http请求的次数，让页面的加载和显示更快。这个合并的功能就是打包。这个打包合成阶段是在开发完成之后进行的，并不影响开发阶段模式，在项目资源打包过程中，会分析各个文件之间的依赖关系，生成一个依赖图并用一个文件保存下来，浏览器运行代码的时候就可以读取这个文件。打包过程中，还可以对资源进行优化处理，比如进行资源解析编译、资源压缩等等操作，而且还能很好的对目前主流框架脚手架支持，最终只需使用最后打包生成的一个对应的文件就可以。

本发明的有益效果是：

1.对项目资源文件的打包方法进行全局定义封装实现方法，在方法内部根据打包文件类型的不同进行不同的属性设置，对外暴露使用接口，通过全局定义的参数数组实现对资源文件的模块化管理，精简配置代码极大的方便了打包入口文件的维护和资源文件的管理；

2.针对开发环境和生产环境进行独立配置，开发环境配置注重浏览器调试工具、快速开发周期中的快速增量编译、在运行过程中提供有效的错误信息；生产环境配置注重易于使用的小体积输出产物、不暴露源码和文件路径、忽略仅在开发时需要的代码。使得配置文件书写思路清晰，按需所配，提高了配置文件的可重用性和拓展性；

3.使服务端运行在内存中的代码同时在本地打包呈现，提高了项目开发效率和对错误问题的追溯。

附图说明

图1为本发明原理图；

图2为本发明工作流程图；

图3为本发明工作框架图。

具体实施方式

如图1-图3所示，本使发明一种前端资源模块化管理和资源打包配置方法，包括有如下步骤：

S1. 基于node环境搭建本地前端项目，初始化项目；

S2. 定义一个配置文件，配置文件是一个简单的js模块，主要功能是提供资源打包需要的解析器，将所有的与打包相关的信息放在配置文件中；

S3. 在项目中设定执行脚本，根据设定的脚本执行不同环境的配置文件生成相对应的资源打包产物，便可以直接在浏览器端运行。

进一步的，打包过程会分析各个文件之间的依赖关系，生成一个依赖图并保存，浏览器运行代码时读取保存的文件。

进一步的，遵循不重复的原则保留一个通用配置，通过通用配置，不必在环境特定的配置中重复代码，进行分别配置开发环境或生产环境的配置文件，实现功能职责明确。

进一步的，模块打包入口文件配置在通用配置中，将打包方法封装，全局定义需要进行打包的文件名称，在封装的方法利用正则遍历文件路径名称信息，存储在数组，在打包入口处直接调用封装好的方法即可。

本发明主要核心在于把一个页面引用的所有资源文件合成一个文件，目的是减少http请求的次数，让页面的加载和显示更快。这个合并的功能就是打包。这个打包合成阶段是在开发完成之后进行的，并不影响开发阶段模式，在项目资源打包过程中，会分析各个文件之间的依赖关系，生成一个依赖图并用一个文件保存下来，浏览器运行代码的时候就可以读取这个文件。打包过程中，还可以对资源进行优化处理，比如进行资源解析编译、资源压缩等等操作，而且还能很好的对目前主流框架脚手架支持，最终只需使用最后打包生成的一个对应的文件就可以。