system万能模块加载器
2019-05-15 本文已影响0人
zxhnext
当我们直接用babel转译我们的es6代码，再将转译的代码引入文件中是不能用的，这时我们就需要system来帮我们加载这个文件。
首先我们在./src/index来写一段es6代码
class Test{
init(){
console.log("初始化");
}
}
//原来的代码里有一句模块化
export default Test;
然后我们将这段代码用babel编译到dist目录中,首先我们在根目录新建.babelrc文件，内容如下：
{
"presets": ["@babel/preset-env"]
}
同时我们需要安装@babel/preset-env，@babel/preset-env(执行shell脚本)这两个包，然后我们在package.json中加入一行shell脚本，
"build": "babel ./src/index.js --out-file ./dist/index-compiled.js"
执行npm run build，执行完后我们可以看到已经在dist目录中生成了index-compiled.js文件，最后我们来看怎么引入
<!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>system万能模块加载器</title>
</head>
<body>
<script type="module">
//没有编译之前的 优化
import index from "./src/index.js";
index.init();
</script>
<script nomodule src="./src/system.js"></script>
<script nomodule>
//编译后的
System.import('./dist/index-compiled.js').then((_) => {
const s = new _.default;
s.init();
})
</script>
<!-- <script src="./src/index-compiled.js"></script> -->
</body>
</html>
