RequireJS解析与基本配置

最新推荐文章于 2025-05-28 14:32:59 发布

Langnang

最新推荐文章于 2025-05-28 14:32:59 发布

阅读量694

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 # JavaScript 文章标签： JavaScript Require

本文链接：https://blog.youkuaiyun.com/qq_38081746/article/details/90023308

JavaScript 同时被 2 个专栏收录

31 篇文章

订阅专栏

前端

26 篇文章

订阅专栏

本文介绍了RequireJS，一种用于模块化加载JavaScript代码的库。讲解了如何通过Browsers和NPM进行安装，并详细阐述了如何进行基本配置，包括主要的main.js设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

RequireJS解析与基本配置

介绍

模块化加载js代码

安装

Browsers:<script type="text/javascript" src="js/plugins/require/require.js" data-main="js/main.js">
NPM:

基本配置

main.js

require.config({
	// 所有模块的查找根路径。即默认加载的模块位于js/plugins目录下
    baseUrl: "js/plugins",
    // path映射那些不直接放置于baseUrl下的模块名
    paths: {
    	"angular":["",""],// 前端主流框架
    	"react":["",""],// 前端主流框架
    	"vue":["",""],// 前端主流
        "jquery": ["","jquery/jquery.min"],// 工具函数库，bootstrap基础插件
        "scrollbar": ["","jquery-scrollbar/jquery.scrollbar.min"],//
        "lodash": ["","lodash/lodash.min"],// 工具函数库
        "bootstrap": ["","bootstrap/js/bootstrap"],// 前端主流库
        "notify": ["","bootstrap-notify/bootstrap-notify.min"],// alert提示插件
        "toggle": ["","bootstrap-toggle/bootstrap-toggle.min"],// toggle按钮插件
        "nunjucks": ["","nunjucks/nunjucks.min"],// js模板引擎
        "popper": ["","popper/popper"],// bootstrap4基础插件
        "circle": ["","chart-circle/circles.min"],//
        "ui": ["","jquery-ui/jquery-ui.min"],// jquery ui插件
        "mapael": ["","jquery-mapael/jquery.mapael.min"],//
        "chartist": ["","chartist/chartist.min"],//
        "echarts": ["","echarts/dist/echarts.min"],// 数据可视化插件
        "moment": ["","moment/moment.min"],// datetime插件
        "holder": ["","holder/holder.min"]// 图片占位符插件
    },
    // 对于给定的模块前缀，使用一个不同的模块ID来加载该模块
    map: {
        "*": {
            "css": "require-css/css.min",
            "text": "require-text/text.min"
        }
    },
    // 为那些没有使用define()来声明依赖关系
    shim: {
        "bootstrap": {
        	// 指定要加载的一个依赖数组。
            deps: [
                "requireCss!bootstrap/css/bootstrap.min",
                "requireCss!font-awesome/css/font-awesome.min",
                "jquery",
                "popper"
            ]
        },
        "toggle": {
            deps: ["jquery"]
        },
        "circle": {
            export: "Circles"
        },
        "lodash": {
            export: "_"
        },
        "jquery": {
            export: "$"
        },
        "mapael": {
            deps: ["jquery",]
        },
        "scrollbar": {
            deps: ["jquery"]
        },
        "nunjucks": {
            export: "njk"
        },
        "echarts": {
            export: "echarts"
        }
    },
    // 将配置信息传给一个模块
    config:{
    },
    // 从CommonJS包(package)中加载模块
    packages:{
    },
    // 在放弃加载一个脚本之前等待的秒数。设为0禁用等待超时。默认为7秒。
    waitSeconds: 0
})