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

JavaScript017

怎么用 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脚本放到页面最底部。