非vue等框架中html 中使用es6的模块用法小结

以下是html中使用es6模块化引入的方法

一、html中的引入

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>1212</div>
    <script type="module">
        import {add as newadd} from './b.js'
        let res = newadd(2,3)
        console.log(res)
    </script>
</body>

</html>

注意：要加上 type="module" ！！！并且配置好本地服务器访问html 。

如果是npm 下载后的包（node_modules），则貌似无法直接通过import ‘引入’ ，需要webpack的配置？？

二、js文件中的写法：

function add(a, b) {
    return a + b + 2;
}
export { add };

注意：建议js的导出利用export 的导出，而非export default 的导出！