Js模块化之ES6代码转换

时间:2020-05-01

新建项目

在项目根目录初始化

npm init

新建模块文件

m1.js

export function test() {
    console.log('m1 test');
}

export function test2() {
    console.log('m1 test2');
}

m2.js

export default {
    name:"wyzda",
    test:function (msg) {
        console.log('m2 test ' + msg);
    }
}

主文件

main.js

import {test,test2} from "./m1";
import m2 from "./m2";
import $ from "jquery";
test();
test2();
m2.test('hello');

$('body').css('background','pink');

根目录新建.babelrc文件 

{
  "presets": ["es2015"]
}

安装babel-cli, babel-preset-es2015和browserify

npm install babel-cli browserify -g 

npm install babel-preset-es2015 --save-dev

将es6代码编译为es5代码

babel js/src -d js/lib

使用Browserify编译js 

browserify js/lib/main.js -o js/lib/build.js

新建测试文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="js/lib/build.js"></script>
</body>
</html>