如何使用外部JavaScript调用webpack打包的函数并解决import报错问题

该报错本质是浏览器默认将不带type="module"属性的JS脚本当做普通ES5脚本处理，不支持ES6的import/export语法。同时你当前的代码逻辑存在缺陷：loadMap、test等方法是挂载在init函数对象上的，且挂载逻辑写在init函数内部，不先执行init()的话这些方法根本不会被初始化，调用时也会报错。

1. 修正代码逻辑 #

两种修复方式二选一即可：

• 方式一：将方法挂载逻辑移到init函数外部，无需提前执行init()即可调用方法

const init = (inputUrl) => {
  // 原有init函数逻辑保留
}
// 方法挂载移到函数外部
init.loadMap = function(inputUrl){
  const wrap = document.querySelector('#px');
  Px.Core.Initialize(wrap, function(){
    Px.Loader.LoadFbx({
      url: inputUrl,
      onLoad: function(){
        console.log("FBX Loading Complete");
        console.log(inputUrl);
      }
    })
  })
}
init.getconfig = function getconfig(){
  return url;
}
function test(msg){
  return console.log('test function completed ' + msg);
}
init.test = test;

export default init;

• 方式二：不改动temp.js，直接修改index.js的调用逻辑，先初始化init再调用方法

import init from './temp.js'
init()
init.loadMap('abc');

2. 修复import语法报错，两种方案可选 #

方案1：webpack全量打包（推荐） #

将index.js作为webpack的入口文件，webpack会自动把import语法转译为浏览器兼容的ES5语法，无需额外处理：

• 修改webpack配置文件（一般为webpack.config.js）的入口配置：

module.exports = {
  entry: './你的index.js存储路径/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  }
  // 其余原有配置保持不变
}

• 打包完成后直接在html中引入打包后的bundle.js即可，不需要引入源码文件，也不需要添加特殊属性。

方案2：浏览器原生运行ES6模块 #

如果不需要用webpack打包index.js，要直接在html中引入源码运行，给script标签添加type="module"属性即可：

<script type="module" src="./你的index.js存储路径/index.js"></script>

注意：该方式要求浏览器支持ES6模块，且所有引入文件的路径必须写完整相对路径，不能使用webpack专属的资源引入语法（比如直接import css、图片等），否则会触发其他报错。

3. 扩展：如果需要暴露方法给全局外部调用 #

如果你的需求是webpack打包后，页面内的其他外部脚本也能调用loadMap方法，需要在webpack配置中添加库输出配置，将导出的内容挂载到全局window对象：

module.exports = {
  entry: './temp.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
    library: 'init',
    libraryTarget: 'window'
  }
}

打包完成后，任意外部脚本都可以直接调用window.init.loadMap('自定义url')。

内容的提问来源于stack exchange，提问作者ringhiosi