【问题已自己解决】如何获取webpabck打包后的__webpack_require__,需要做一个能加载第三方js功能

嘻倪孢
  • 330

现在已经实现效果

已经实现import的的 http://a.js 不会打包到webpack中。会在需要的时候才回去加载。 所以就无法做打包,所以加载的js 就必须是已经打包好的,能让浏览器识别的

import xxx from 'http://a.js'
import('http://a.js')
//原始实现,只要去webpack的配置添加externals的添加一个处理函数就可。添加的是函数

其他问题

问题一

返回值只能接受到直接return 和umd格式包装的。
还是一个问题就是无法再a.js中在直接
import xxx from 'http://a.js'
import('http://a.js')
或者可以在return 的时候 return 一个promise 回去这样可以让a.js 引用多个依赖

问题二

如果a.js 里面的内容是 es6的module格式还无法接收。这个需要一个转换函数,我已经能拿到webpack内部的__webpack_require__。 只需要安装webpack的转换规则转换一下,就是不知道这么转换

可以使用的大概是这种内容的

// 第一种 a.js 有明确返回值得
var text = 1;
return text;

// 第二种 a.js 这种umd格式的
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
   // 其实主要还是挂着在这种。 exports,define  没用
  (global = global || self, factory(global.React = {}));
}(this, (function (exports){
   //xxx
});

improt a from 'http://a.js'
// a 就是 a.js retrun的值 或umd挂载在window上面的值

原始问题

我是一个低代码平台,用户可以自己上传公共代码,在需要的地方去运行。大概是这样一个需求。
用户可以上传手写的如 a.js, 这个js我打算定义成umd标准(或者其他标准也行)。
然后用户在需要用他的a.js的时候 就可以 improtjs('http://a.js').then(a => {//自己的逻辑})。
我本身是webpack打包的,我就想到包装webpack打包后的__webpack_require__,去帮我们加载 来实现这个improtjs。还可以放到webpack的__webpack_module_cache__,不用每次都加载。但是我不知道如何拿到这个__webpack_require__。
实例:

// 用户的a.js
(function(window, factory) {
    window.a= factory();
}(this, function() {
    return {
        name: '我是一个umd模块'
    }
}))

// 用户在需要用到这个js的地方
importjs ('http://a.js').then(a => consle.log(a.name))

或者不用umd标准,用户直接return 它的返回值?
实例:

// 用户的js
const a= '我是a.js'
return a;

// 用户用的地方
importjs('http://a.js').then(a => console.log(a))
importjs 内部就用new Function 去做?
// 或者我给他处理成webpack 按需加载的那种
[["http://a.js"],{"http://a.js": function(){

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