怎么用 RequireJS 把前端代码打成多个包

JavaScript018

怎么用 RequireJS 把前端代码打成多个包,第1张

举例说一下吧:

比如,我有两个页面,分别调用了main.js和add.js....在这两个里面会自动查找到关联的js模块,所以只在html页面里面写上这两个的入口,如下:

index.html页面里面:<script src="js/require.js" defer async="true" data-main="js/main"></script>

add.html页面里面:<script src="js/require.js" defer async="true" data-main="js/main"></script>

那么单独写一个配置文件,简单如下:

({

appDir: "./",

baseUrl: "js",

dir: "../r-build",

paths: {

jquery: 'empty:'

},

modules: [

{

name: "main"

},

{

name: "add"

}

]

})

appDir: 应用程序的最顶层目录。可选的,如果设置了的话,r.js会认为脚本在这个路径的子目录中,应用程序的文件都会被拷贝到输出目录(dir 定义的路径)。如果不设置,则使用下面的 baseUrl 路径。

baseUrl: 默认情况下,所有的模块都是相对于这个路径的。如果没有设置,则模块的加载是相对于 build 文件所在的目录。另外,如果设置了appDir,那么 baseUrl 应该定义为相对于 appDir 的路径。

dir: 输出目录的路径。如果不设置,则默认为和 build 文件同级的 build 目录。

modules: 定义要被优化的模块数组。每一项是模块优化的配置,常用的几个参数如下:

通过上面的配置,index.html就会引用main.js的打包文件,而add.html就会引用add.js打包文件,它们只引用自己需要的,而不是全部打包。

常规调用方法 从来没有在script标签中加如果 defer 属性defer的意思是等页面中的标签加载完后在加载引入的js脚本,但defer也有弊端,在 标签中加入后 所引入的脚本就不能写document.write(),因为这样会直接输出效果;还有就是立即执行的脚本不能加入 defer="defer",(但默认defer是false,可以加默认属性);但火狐浏览器是不支持这个脚本属性chrome浏览器应该是支持的,但chrome浏览器不像IE浏览器按顺序执行,在chrome中两个脚本,下面脚本借用上面脚本,会出现下面可能先执行,上面还没有加载完。 解决方法: 把js脚本放到页面最底部。