打包 bundle

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

打开浏览器的开发者工具 .. 再打开 network 这个选项卡 .. 在这里你会看到被下载的一些东西 .. 这里有挺多 js 文件 .. main.js .. fruit.js ,jquery.js 等等 ..

jspm 支持 bundle,也就是打包的功能,就是把一些资源打包成一个东西 .. 比如下面我们去把 main.js 这个模块打包成一个东西 ..

打开命令行工具 .. 进入到项目所在的目录 .. 打包用的是 jspm bundle 命令 .. 然后是要打包的东西,这里就是 app 目录下的 main .. 它的后面是打包以后的文件名 .. 放到 app 这个目录的下面,文件名可以设置成 build.js .. 回车执行一下 ..

jspm bundle app/main app/build.js

这里会显示,创建 main 的打包需要的东西 .. 你会看到,这里有 main.js ,还有 fruit.js ,这是在 main.js 里面导入的一个模块 .. 因为这个模块里又导入了 jquery ,所以这里又会出现 jquery ..

完成以后,会在 app 目录下面创建一个叫 build.js 的文件 .. 回到编辑器 .. 用一个 script 标签 .. 把 app 下的 build.js 嵌入进来 .. 保存 ..

再回到浏览器 .. 在 network 这个选项卡里,会少了很多 js 文件,因为我们把它们打成了一个包 .. 就是这个 build.js ..

还有一些方法可以自动载入打的包 .. 回到命令行 .. 在使用 jspm bundle 打包的时候,加上一个 --inject 选项 .. 这个选项会去修改一下 config.js .. 回到编辑器 .. 这里会有一个 bundles .. 下面有一个 build.js .. 它的下面,会出现一些依赖的东西 ..

这样我们就可以去掉 index.html 里的 script 标签了 .. 再回到浏览器 .. 这个使用了 js 模块的页面同样会正常的显示 ...

打包 bundle《 前端工具箱 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点