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

anRui 发布于2019-08-21 12:23 / 2733人阅读

摘要：尝试用自己主页的简单代码构建优化下。存放和，放需要构建的项目代码，为构建目标文件夹。我另外一篇博文构建优化有简单说了下，构建的命令，其实上的官网，看有更详细的内容。

尝试用自己主页的简单代码构建优化下。
在文件夹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中。

服务器托管云服务器 webrtc优化实践 require.js php项目实践 python实践项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87571.html

RequireJS进阶:配置文件的学习

摘要：概述强大灵活的运用是通过配置文件决定的。下面通过示例来进行深度的探讨配置文件的使用。配置文件的位置配置文件的位置和声明用法是相对于这个脚本文件来决定的。配置文件参数的介绍所有模块的查找根路径。概述 Requires强大灵活的运用是通过配置文件决定的。通过配置文件我们可以给模块取别名、给模块加上版本标识、设置模块依赖、包装非模块等强大功能。同时RequireJS的优化器也大量使用了配...

lemon 2019-08-14 11:55 评论0 收藏0
【前端构建】RequireJS及其优化工具

摘要：介绍一款模块加载工具的入门，并且重点介绍其优化工具。发布目录项目源代码工具目录，例如构建工具等。另外，前端代码发布前都会进行压缩，使文件足够小。原来是因为里了，所以优化工具把也合并进来了。而优化工具要用好，要多尝试他们的配置选项。前端变化太快，如今RequireJS已经无法吸引眼球了。介绍一款模块加载工具：RequireJS的入门，并且重点介绍其优化工具。一、RequireJS简介...

Loong_T 2019-08-19 17:59 评论0 收藏0
RequireJS配置项笔记

摘要：读不顺中文文档，对应中文文档，自行翻译的如果有问题错误，欢迎指点修改配置选项方法一在顶级页面或顶级脚本文件没有定义模块的脚本文件中配置方法二在主模块中配置缺点主模块异步加载，多入口的话，会随机报错方法三在调用之前，将配置定义为全局变量配置在读不顺中文文档，对应中文文档，自行翻译的……如果有问题/错误，欢迎指点；修改配置选项：方法一、 requi...

FWHeart 2019-08-19 18:01 评论0 收藏0
前端面试题（3）现代技术

摘要：什么是单页面应用单页面应用是指用户在浏览器加载单一的页面，后续请求都无需再离开此页目标旨在用为用户提供了更接近本地移动或桌面应用程序的体验。流程第一次请求时，将导航页传输到客户端，其余请求通过获取数据实现数据的传输通过或远程过程调用。什么是单页面应用(SPA)？单页面应用(SPA)是指用户在浏览器加载单一的HTML页面，后续请求都无需再离开此页目标：旨在用为用户提供了更接近本地...

EasonTyler 2019-08-26 11:58 评论0 收藏0