使用srcipt引入js的情況下使用ES6的export的import語法
阿新 • • 發佈：2021-01-29
注：在此情況下使用，需要把script的type值設定為module ，預設情況下 type=“text/javascript”
案例：
idnex.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script src="api.js" type="module"></script> <script src="util.js" type="module"></script> <script type="module"> import { Obj, argu } from './util.js' var a = argu(10); var b = Obj.add(10); var c = Obj.reduce(10); console.log('index',a, b, c) </script> </html>
util.js
export function argu(argu){
return argu+10;
}
var Obj = {
add:function(argu){
return argu+10;
},
reduce:function(argu){
return argu-1;
}
}
export { Obj }
api.js
import { Obj, argu } from './util.js'
var a = argu(10);
var b = Obj.add(10);
var c = Obj.reduce(10);
console.log(a, b, c) 尚未得到支援的 import 路徑符號
// 支援
import {foo} from 'https://jakearchibald.com/utils/bar.js';
import {foo} from '/utils/bar.js';
import {foo} from './bar.js';
import {foo} from '../bar.js';
// 不支援
import {foo} from 'bar.js';
import {foo} from 'utils/bar.js';
有效的路徑符號應當符合以下條件規則之一：
完整的非相對路徑。這樣在將其傳給new URL(moduleSpecifier)的時候才不會報錯。
以 / 開頭。
以 ./ 開頭。
以 …/ 開頭。
其他形式的符號被保留下來，未來將用於其他功能（如引入[import]內建模組）。