使用require.js构建优化项目实践

发布时间:2019-05-20 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了使用require.js构建优化项目实践脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

尝试用自己主页的简单代码构建优化下。
在文件夹requirejs-optimizer下新建三个文件夹:tools,www和www-built。tools存放r.js和build.js,www放需要构建的项目代码,www-built为构建目标文件夹。

www下代码结构:
请输入图片描述

js/main-index.js为require.js的入口文件:

requirejs.config({
    paths:{
        jquery: 'jquery.min',
        pikachoose: 'jquery.pikachoose'
    },
    shim:{
        pikachoose:{
            deps: ['jquery'],
            exports: 'PikaChoose'
        }
    }
});

requirejs(['jquery','pikachoose'],function($,pikachoose){
    $("#pikame").pikachoose({
        showCaption: false,
        transition: [7,7,8],
        animationSpeed: 1500
    });
    $("#pikame2").pikachoose({
        showCaption: false,
        transition: [8,7,7],
        animationSpeed: 1500
    });
});

原本jquery我是使用CDN的,构建之后出错了,提示jquery is not defined,是因为pikachoose依赖于jquery,如果使用CDN,需要确保jquery比pikachoose先加载,但我还未找到要如何设置,所以先把jquery下载到本地,和pikachoose一起构建。
tools/build.js的配置信息:

{
    appDir: "../www", 
    baseUrl: "js",
    paths: {
        jquery: "jquery.min",
        pikachoose: "jquery.pikachoose"
    },
    shim: {
        pikachoose: {
            deps: ["jquery"],
            exports: "PikaChoose"
        }
    },
    dir: "../www-built",
    optimizeCss: "standard", //css优化参数设定
    modules: [
        {
            name: "main-index"
        }
    ]
}

详细的build.js配置可以参考example.build.js,有很详细的介绍每个参数的配置情况。我另外一篇博文require.js构建优化有简单说了下,构建的命令,其实上require.js的官网,看api有更详细的内容。构建后www-built目录下的内容:
请输入图片描述
和www目录结构一样,除却js和css,其他格式的文件和文件夹从www拷贝过来,不同的是,css样式文件内容被压缩,main-index.js配置下用到的模块依赖压缩合并到main-index.js中。

脚本宝典总结

以上是脚本宝典为你收集整理的使用require.js构建优化项目实践全部内容,希望文章能够帮你解决使用require.js构建优化项目实践所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: