关于webpack externals 引入外部js的问题

1. 引入 jquery

在页面引入

    <script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>

在webpack中配置

  // 外部JS
   ,externals:{
    jquery: 'jQuery',
  }

在程序中应用

  import $ from 'jquery'

2. 引入自定义js 导入的坑

页面引入

    <script src="./static/js/WMFJS.bundle.min.js"></script>
    <script src="./static/js/EMFJS.bundle.min.js"></script>
    <script src="./static/js/RTFJS.bundle.min.js"></script>

webpack 配置

  ,externals:{
    wmfjs:'WMFJS',
    emfjs:'EMFJS',
    rtfjs:'RTFJS', //冒号后边大写的'RTFJS' 是外部js 提供的全局变量
    
  }

在调试窗口可以看到 externals 中的全局变量已经导出，类型是 Module

由于 类型是 Module

在导入的时候 只能用 import * as RTFJS 给变量命名

// eslint-disable-next-line import/extensions
import * as RTFJS from 'rtfjs'
// eslint-disable-next-line import/extensions
import * as WMFJS from 'wmfjs'
// eslint-disable-next-line import/extensions
import * as EMFJS from 'emfjs'

以下的导入方式是错误的

  import RTFJS from 'rtfjs'  //因为在 rtfjs 没有导出RTFJS 这个对象