es6 es6规范模块打包es6语法js文件

ES6 基于Babel、browserify模块化打包

 1、生成package.json文件, npm init；
 name不能为大写和中文
 
 2、下载babel-cli、babel-preset-es2015、browserify模块 //cli表示命令行接口,其中包含babel命令
    npm install browserify -g
    npm install browserify --save-dev
    npm install babel-cli -g
    npm install babel-preset-es2015 --save-dev  //preset预设,将es6转换成es5的所有插件打包
    
 3、根目录创建.babelrc文件,即运行控制文件;

    (1)若直接创建不是json格式，则需要file==》settings==>Editor==>File Types；
     点击上方的Json，点击右下角+号，添加文本类型.babelrc
    (2)写入内容:
        {
            "presets":["es2015"]
        }
 4、各模块内暴露语法
 常规暴露:
    (1)分别暴露:
        export xxx;
        export xxx;
    (2)统一暴露:
        xx
        export {暴露变量名1,暴露变量名2,...}; //这里使用了es6对象简写方式,若属性名和内容相同,则只需要写属性名
 默认暴露:
 export default xxx;  一个js文件只能使用一次
        
 5、主js文件接收暴露内容语法
    import {暴露的变量名1,暴露的变量名2,...} from '模块路径';
    因为这里运用了es6的解构对象赋值,不管是分别暴露还是统一暴露都被到一个对象里,所以需要对象的解构赋值来获取,即{}中的变量名和暴露的属性名必须一样

 6、使用babel，将用es6语法写的js文件转换成es5(会包含commonjs语法,所以还需使用browserify再打包)： babel 包含文件的文件夹 -d 编译到指定文件夹
    使用browseify:browserify '上一步中编译到指定文件中中的包含引入其他js文件的主js文件的路径(包含文件名)’ -o '编译到指定文件夹'

 7、浏览器端使用: script标签引入browserify 最终编译的文件路径

代码示例:

模块分布:
在这里插入图片描述

模块1:

//统一暴露
function fun()
{
    console.log('fun module2');
}

function fun2()
{
    console.log('fun2 module2');
}

export {fun,fun2};

模块二:

//暴露模块  //分别暴露
export function foo(){
    console.log("foo module1");
}

export function bar()
{
    console.log('bar module1');
}

export let arr=[1,2,3,4];

导入其他文件的主文件:

//因为暴露的数据都在对象里,所以必须使用对象的解构赋值来接收,即变量名和对象中的属性名必须相等
import {foo,bar} from './m1.js';
import {fun,fun2} from './m2.js';
console.log(fun,fun2);

foo();
bar();
fun();
fun2();

打包过程代码:
babel js/src -d js/lib
browserify js/lib/min.js -o js/dist/boundle.js

浏览器文件:

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

</body>
</html>

神奇大叔

发布了387 篇原创文章 · 获赞 3 · 访问量 9134

私信关注

es6 es6规范模块打包es6语法js文件

猜你喜欢