UMD规范 typeof module === 'object' 报错

Dushusir
  • 108

新手,见谅。

1.问题
尝试使用UMD写法包装我的js文件,但是使用常规写法后,在vue + webpack工程中失败,
npm run dev 后,控制台报错

2.
(1)文件目录:
图片描述

(2)代码:
example1.js

// example1.js 文件
// 定义有依赖的模块

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['./example2'], factory);
    } 
    else if (typeof module === 'object' && module.exports) {
        module.exports = factory(require('./example2'));
    } else {
        root.example1 = factory(root.example2);
    }
    
}(this, function (example2) {
    console.log("example2",example2);
    example2.sayHello();
    
    return {example2}
}));

example2.js

// example2.js 文件
//没有依赖的js
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define([],factory);
    }
    else if(typeof module === 'object' && module.exports) {
        module.exports = factory();

    } 
    else {
        root.example2 = factory();
    }

}(this, function () {
    var obj = {a:"i am obj!"}
    return {
        sayHello:function(){
            console.log('hello world Alex!');
        },
        obj
    };
}));

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
var example1 = require('./assets/example1');

console.log("example1 in main",example1)


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3.报错
图片描述

4.尝试
(1)单用AMD的写法是OK的。(具体写法不列出了)
(2)尝试注释掉 typeof module === 'object' 的判断也OK,后面发现typeof module === 'object'的判断会影响typeof define === 'function'的判断。
比如:

// example1.js 文件
// 定义有依赖的模块

(function (root, factory) {
    console.log("define",typeof define === 'function')
    // console.log("object",typeof module === 'object',module.exports)
    if (typeof define === 'function' && define.amd) {
        console.log("in define!")
        define(['./example2'], factory);
    } 
    // else if (typeof module === 'object' && module.exports) {
    //     module.exports = factory(require('./example2'));
    // } 
    // else {
    //     root.example1 = factory(root.example2);
    // }
    
}(this, function (example2) {
    console.log("example2",example2);
    example2.sayHello();
    
    return {example2}
}));
(example2.js同样处理)

成功状态:typeof define === 'function'为 true
图片描述

但是打开typeof module === 'object'的判断,

// example1.js 文件
// 定义有依赖的模块

(function (root, factory) {
    console.log("define",typeof define === 'function')
    console.log("object",typeof module === 'object',module.exports)
    if (typeof define === 'function' && define.amd) {
        console.log("in define!")
        define(['./example2'], factory);
    } 
    // else if (typeof module === 'object' && module.exports) {
    //     module.exports = factory(require('./example2'));
    // } 
    // else {
    //     root.example1 = factory(root.example2);
    // }
    
}(this, function (example2) {
    console.log("example2",example2);
    example2.sayHello();
    
    return {example2}
}));

结果不同,这时候typeof define === 'function' 变为 false:
图片描述
不用console.log,在 else if()中判断,也会出现同样的问题,在npm run dev环境下查看的结果,
求大佬分析下,感谢

回复
阅读 2.3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏