簡短的說明如何在index.html檔中呼叫test.js檔的function，而test.js中又呼叫showLog.js中的function。最近在寫js code，js檔發展的愈來愈大，終於忍不住想把它拆開來模組化。上網找資料，不知道為什麼找到的總是和node.js有關，不然就是要裝一些其它軟體，瀏覽器上的東西怎麼可能這樣搞，東拼西湊終於試出來，簡單的範例以及中間遇到過比較討厭的問題寫在下面。
Access to script at 'file:///User/test.js' from origin 'null'
has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes:
http, data, chrome, chrome-extension, https.
這段話是說瀏覽器上的網址列不能是file開頭，必需是後面列的http, data, chrome, chrome-extension, https這幾種開頭才行。
最後成功的範例
index.html
<html>
<head>
<script type="module">
import {myFun} from './test.js';
window.onload = myFun;
</script>
</head>
<body>
</body>
</html>
test.js
import * as ouputLog from './showLog.js';
export function myFun()
{
ouputLog.showData();
}
showLog.js
export function showData()
{
console.log("show log");
}
webpack 新手教學之淺談模組化與 snowpack
https://blog.techbridge.cc/2020/01/22/webpack-%E6%96%B0%E6%89%8B%E6%95%99%E5%AD%B8%E4%B9%8B%E6%B7%BA%E8%AB%87%E6%A8%A1%E7%B5%84%E5%8C%96%E8%88%87-snowpack/
淺談JavaScript ES6的import與import{}及export及export default使用方式
https://blog.typeart.cc/%E6%B7%BA%E8%AB%87JavaScript%20ES6%E7%9A%84import%E8%88%87import%7B%7D%E5%8F%8Aexport%E5%8F%8Aexport%20default%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F/
MDN Web Docs import
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/import
沒有留言:
張貼留言