requirejs打包时,通用模块 和 页面模块 中的共用模块重复打包

发布于 2022-09-01 05:49:04 字数 2953 浏览 26 评论 0

每个页面都用到的main.js,和只有当前页用到的page.js
这两个模块都用依赖jquery模块
使用r.js打包的配置文件

options: {
      mainConfigFile: 'src/config.js',
      baseUrl: './src',
      removeCombined: true,
      preserveLicenseComments: true,
      dir: 'dist',

      modules: [{
        name: 'common'
      }, {
        name: 'app/home'
      }]
    }

然后打包出来的main.js和page.js中都会存在jquery的源码
于是我给他们添加exclude如下

options: {
      mainConfigFile: 'src/config.js',
      baseUrl: './src',
      removeCombined: true,
      preserveLicenseComments: true,
      dir: 'dist',

      modules: [{
        name: 'main',
        exclude: ['jquery']
      }, {
        name: 'app/home',
        exclude: ['jquery']
      }]
    }

jquery文件是单独打包出来了,但是页面中又出现奇怪的 Undefined jquery错误

clipboard.png

源码:

clipboard.png

//html
<script type="text/javascript" data-main="dist/main.js" src="dist/lib/require.js"></script>
<script type="text/javascript" src="dist/config.js"></script>
<script type="text/javascript" src="dist/app/home.js"></script>


//config.js
require.config({
    paths: {
        jquery: 'lib/jquery-1.11.2.min',
        bootstrap: 'lib/bootstrap/bootstrap.min',
        jqueryTelinput: 'lib/jquery.telinput/js/intltelinput.min',
        jqueryLazyload: 'lib/jquery.lazyload',
    },

    shim: {
        bootstrap: ['jquery'],
        jqueryTelinput: {
            deps: [
                'jquery',
                'css!lib/jquery.telinput/css/intltelinput.css'
            ]
        },
        jqueryLazyload: {
            deps: ['jquery'],
            exports: '$.fn.lazyload'
        }
    }
});

//main.js
define(['require', 'jquery', 'bootstrap', 'common/telinput.init', 'common/lazyload.init']);

//home.js
requirejs(['common/test'], function(test) {

    $(function() {
        console.log(test);
    });
});

//test.js
define(['jquery'], function($) {
    test = {
        bind: function($btn) {
            $btn.click(function() {
                alert('click!');
            });
        },

        a: 'hello'
    };

    return test;
});

//build.txt

css/style.css
----------------
css/style.css

lib/bootstrap/bootstrap.min.css
----------------
lib/bootstrap/bootstrap.min.css

lib/jquery.telinput/css/demo.css
----------------
lib/jquery.telinput/css/demo.css

lib/jquery.telinput/css/intlTelInput.css
----------------
lib/jquery.telinput/css/intlTelInput.css

main.js
----------------
css.js
css!lib/jquery.telinput/css/intltelinput.css
lib/jquery.telinput/js/intltelinput.min.js
common/telinput.init.js
lib/jquery.lazyload.js
common/lazyload.init.js
main.js

app/home.js
----------------
common/test.js
app/home.js

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

秋意浓 2022-09-08 05:49:04

自己找到问题了,原来require.config要全局使用的话必须单独在页面上引用,
写了一个完整的实例有兴趣可以下载来看https://github.com/93html/requirejs-example

烙印 2022-09-08 05:49:04

把require.config的option里的path和shim都加到build的option里面。

潦草背影 2022-09-08 05:49:04

大神用 gulp 打包 requirejs 项目 试过没有

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文