如何知道何時導入包或將其粘貼到 index.html

Question

好的，我正在使用 ES6 和 ReactJS，您應該import React from "react";一些包import React from "react"; 為了讓它們工作，但其他<script src="/semantic/dist/semantic.min.js"></script>在index.html ，那么，我應該在哪些情況下應用一個或另一個？

Answer 1

一般來說，有兩種類型的模塊。 ES6 和非 ES6。 如果你想在 ES6 中使用非 ES6 模塊，你可以嘗試以下方法之一：

使用 CommonJS 編譯（例如通過 npm 使用 jQuery 作為 CommonJS）
使用 SystemJS 加載以允許 ES6 與 CommonJS、AMD 和全局變量一起使用

如果你不想這樣做，你可以嘗試在 HTML 中導入非 ES6 腳本。 在這種情況下，你不會做類似的事情

import $ from 'jquery';

所以簡而言之，如果你想使用非 ES6 模塊而不用 CommonJS 編譯或者如果它不能通過 npm 使用，你可以使用 HTML 導入而不是 ES6 導入

Answer 2

我在以下情況下遇到了這個問題：我想在我為本地index.html文件編寫的腳本中使用 react 和 react-dom api。 我可以在index.html的<head>中放置一個<script src="react-cdn-url"></script>標簽，但我更喜歡在我的本地系統上使用 api。 所以我wget react-cdn-url看看我是否可以導入它。 我在控制台上遇到一些錯誤，所以我查看了我現在擁有的react.js文件並看到以下幾行：

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global.React = factory());
}(this, (function () { 'use strict';
...
})));

一旦我破譯了這一點，我應該能夠使我的反應 api“可導入”。 所以讓我們一點一點地剝離它。 第一個構造：

(function (global,factory){}(this,(function() {...})));

這個一開始有點迷惑，所以先看表達式： (function (params){}(args)); 這樣做的目的是創建一個未命名的函數，它接受參數params ，然后立即使用參數arg調用它。 將此與;function (params){}(args);對比;function (params){}(args); . 這不是有效的 javascript，如果你在 node 中嘗試，你會破壞解析器，如果你在 firefox 控制台中這樣做，你會得到錯誤： SyntaxError: function statement requires a name 。 原因是這是一個不完整的句法結構。 Javascript 語法允許您編寫沒有綁定名稱的函數定義，但這僅在表達式中有意義。 將函數定義括在括號中會導致對其進行評估。 把所有這些放在一起，我們有一個未命名的函數被調用參數this和(function(){}) （另一個未命名的函數）。 this將是任何本地上下文，並且未命名的函數對應於“頂級”匿名函數中的factory參數。 考慮以下三行：

typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.React = factory());

這些檢查是否正在從節點導入此模塊，如果是，則導出factory函數的結果。 如果它是由 require.js 導入的，它會“定義” factory函數，如果這兩者都沒有，則factory的結果在全局對象中被命名為“React”。 最后一種情況適用於通過<script>標記“導入”庫時。

但是，如果您嘗試es6 import ，這些情況都不會真正適用。 為了使import按預期工作，我們只需導出工廠函數，然后在導入腳本中調用它。 為什么不直接調用工廠函數並將其分配給導出的名稱？ 因為您需要將這個工廠的結果傳遞給react-dom的工廠。 總的來說，沿着這條道路還有很多問題，最終最好是解決某種依賴管理器，但現在我們繼續玩。

let ReactFactory;
export default ReactFactory = function () { 'use strict';
...
}

我對 react-dom 文件做同樣的事情，改變這些行：

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
    typeof define === 'function' && define.amd ? define(['react'], factory) :
    (global.ReactDOM = factory(global.React));
}(this, (function (React) { 'use strict';
...
})));

進入：

let ReactDOMFactory;
export default ReactDOMFactory = function (React) { 'use strict';
...
}

請注意，這次工廠函數具有參數React 。 我看到了幾行：

if (!React) {
  {
    throw Error("ReactDOM was loaded before React. Make sure you load the React package before loading ReactDOM.");
  }
}

從這里我得到提示，我需要從我的第一個工廠創建我的React對象並將其傳遞給ReactDOMFactory 。 總而言之，我將以下幾行放在我的script.js文件中：

import ReactFactory from '/path-to-modified/react.js';
import ReactDOMFactory from '/path-to-modified/react-dom.js';
let React = ReactFactory();
let ReactDOM = ReactDOMFactory(React);

當然， path-to-modified是修改后的 api 文件的路徑，瞧！ 現在它工作得很好。

如何知道何時導入包或將其粘貼到 index.html

問題描述

2 個解決方案

解決方案1
5 已采納 2015-07-29 06:22:52

解決方案2
2 2020-01-30 12:54:47

如何知道何時導入包或將其粘貼到 index.html

問題描述

2 個解決方案

解決方案1 5 已采納 2015-07-29 06:22:52

解決方案2 2 2020-01-30 12:54:47

解決方案1
5 已采納 2015-07-29 06:22:52

解決方案2
2 2020-01-30 12:54:47