require.js简单上手

笑看风云不留痕

于 2021-01-22 09:39:16 发布

阅读量231

点赞数

分类专栏： require

本文链接：https://blog.csdn.net/qq_39432715/article/details/112977192

版权

js 前端

require 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.创建项目，引入js

在这里插入图片描述

2.创建一个html index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础页</title>
    <!--layui-->
    <link rel="stylesheet" href="../static/lib/layui-v2.4.5/layui/css/layui.css">
    <!--bootstrap-->
    <link rel="stylesheet" href="../static/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>

<body>
	<!--src写require的，后面的datamain表示加载完require后加载index.js-->
    <script src="../static/lib/js/require.js" data-main="../static/js/index.js"></script>
</body>

</html>

3.创建requireConfig.js，index.js

1.requireConfig.js

//requirejs配置，也就是相当于html的路径
require.config({
    baseUrl: "../static/lib",
    paths: {
        "jquery": "js/jquery.min",
        'layui': 'layui-v2.4.5/layui/layui',
        //bootstrap
        'bootstrap': 'bootstrap-3.3.7-dist/js/bootstrap.min',
        'bootstrapTable': 'bootstrap-table-master/dist/bootstrap-table.min',
        'bootstrapTableZhCN': 'bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.min',
    },
    /**
     * 加载顺序
     */
    shim: {
        'bootstrap': {
            deps: ['jquery']
        },
        'layui': {
            deps: ['jquery']
        }
    }
});

2.index.js

//加载require,路径相对于index.js的路径
require(['config/requireConfig'], function (config) {
    //加载jquery，layui，bootstrap
    require(['jquery', 'layui', 'bootstrap', 'bootstrapTable', 'bootstrapTableZhCN'],
        function ($, layui, bootstrap, bootstrapTable, bootstrapTableZhCN) {
            /**
             * 初始化函数
             */
            $(document).ready(function () {
                alert('加载jquery完成');
            });
        });
});