require.js的使用

来源：互联网发布：淘宝的关键词怎么设置编辑：程序博客网时间：2024/06/11 13:30

1.下载require.js,放到项目中
在HTML中
<script type="text/javascript" src="{{ asset('static/libs/require.js') }}"
data-main="{{ asset('static/js/post/create') }}"></script>
加载require.js, data-main放置当前需要加载的js文件

很明显，只是加载这两个js文件是不够的，需要jquery.js，那么这里是如何实现的呢？
配置config.js
require.config({
shim: {
'bootstrap': {
deps: ['jquery'],
exports: 'bootstrap'
},
'bootstrap-datetimepicker': {
deps: ['bootstrap']
},
'datetimepicker-locale-zh-CN': {
deps: ['bootstrap-datetimepicker']
},
'jquery.cookie': {
deps: ['jquery']
},
'jquery.dotdotdot': {
deps: ['jquery']
},
'select2': {
deps: ['jquery']
},
'select2.i18n-zh-CN': {
deps: ['select2']
},
'bootstrap-growl': {
deps: ['jquery', 'bootstrap']
}
},
baseUrl: 'static',
paths: {
'jquery': 'libs/jquery/jquery-2.1.4.min',
'jquery.cookie': 'libs/jquery/jquery-cookie',
'jquery.dotdotdot': 'libs/jquery.dotdotdot/jquery.dotdotdot.min',
'bootstrap': 'libs/bootstrap/js/bootstrap.min',
'underscore': 'libs/underscore-min',
'bootstrap-datetimepicker': 'libs/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min',
'datetimepicker-locale-zh-CN': 'libs/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN',
'util': 'js/common/util',
'app': 'js/app',
'select2': 'libs/select2/js/select2.min',
'select2.i18n-zh-CN': 'libs/select2/js/i18n/zh-CN',
'echarts': 'libs/echarts/echarts.min',
'nprogress': 'libs/nprogress/nprogress',
'bootstrap-growl': 'libs/bootstrap-growl/jquery.bootstrap-growl.min',
'clipboard': 'libs/clipboard/clipboard.min',
'tinymce': 'libs/tinymce/tinymce.min',
'layzr': 'libs/layzr/layzr.min'
},
waitSeconds: 15
});

在自己定义的js中
requirejs(['../config'], function () {
require(['jquery', 'bootstrap', 'tinymce'], function ($) {});
});

首先加载配置的config.js
其次，require入你需要的其他脚本

0 0