javascript - 将 JS IIFE 库导出到 React 组件

Question

我刚刚开始学习 React JS。所以我有这 2 个 JS 文件:

1. Polyfill.js -> github
2. CustomNavbar.js -> 我的

polyfill.js结构

export default (function(window){
...
var classy = {
   ...
}
...
})(window);

!window.addEventListener && window.Element && (function () {
...
---code---
...
})();

这是customnavbar.js

import { cs } from "./polyfill";

(function(){
...
function openNav(){
   ...
   cs.classy.add(overlay, 'on-overlay');
   ...
}
...
})();

这是我的组件.jsx

import "./customnavbar.js"
...
...

没用，错误说cs没有定义。也许我的导出语法有误？

<script src="./polyfill.js">
<script src="./customnavbar.js">

^ 我希望它像纯 HTML 一样工作，但我不知道如何在 React 中做到这一点。请帮忙!

Answer 1

import "./customnavbar.js"

对于模块导入来说不是有效的语法。

设置type的<script>元素至 "module"

<script src="./polyfill.js" type="module">

return classy来自 IIFE 的对象

“脚本.js”

export default (() => { const classy = {fn() { return 1 }}; return classy })();

import导出的`classy对象

“polyfill.js”

import classy from "./script.js";
// do stuff

plnkr http://plnkr.co/edit/Q0orq8Bvk6nOT8tX0qLg?p=preview