使用Gulp(V3.+) + Babel + Browserify 配置ES6的开发环境

灰太狼 2023-06-30 02:49 9阅读 0赞

[源码][Link 1]

这里使用的Gulp 版本有 V3.9.1，大版本为3.0，如果使用了V4.0版本，配置上会有比较大的改变，具体可以参考另外一篇文章：

# 1.简单说明一下： #

gulp 是工具，  
Babel 编译 ES6 => ES5,  
Browserify 添加浏览器支持。

# 2. 整体项目结构 #

![在这里插入图片描述][20200114181241980.png]

# 3. 测试代码 #

## 3.1 App.js ##

class App{ 
        constructor(name) { 
            this.name = name;
        }
    
        render() { 
            document.querySelector("#app").innerHTML = ("test gulp babel " + this.name);
        }
    }
    
    export default App;

## 3.2 入口文件 entry.js ##

import App from "./App";
    
    (() => { 
        let app = new App("999");
        app.render();
    })();

## 3.3 index.html 页面 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Babel + Browserify</title>
    </head>
    <body>
        <div id="app"></div>
    <script src="dist/js/app.min.js"></script>
    </body>
    </html>

## 3.4 .babelrc Babel 基本配置 ##

{ 
      "presets": ["env"]
    }

# 4.实现方式 #

目的一个，但实现方式多样，目前这里只列出来 2 个：

## 4.1 第一种实现方式 ##

单独使用 Gulp-babel 进行转码，然后再使用 Browserify 打包。

### 4.1.1 Package.json ###

{ 
      "name": "gulpl_v3_babel",
      "version": "1.0.0",
      "description": "",
      "main": "entry.js",
      "scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": { 
        "babel-core": "^6.26.3",
        "babel-preset-env": "^1.6.1",
        "browserify": "^16.5.0",
        "gulp": "^3.9.1",
        "gulp-babel": "^6.1.2",
        "gulp-watch": "^4.3.11",
        "gulp-uglify": "^3.0.2",
        "vinyl-source-stream": "^2.0.0"
      }
    }

注意以上使用的 Gulp 版本。

### 4.1.2 gulpfile.js ###

直接使用 gulp 命令编译，成功之后，访问 index.html 页面就可以看到效果。  
![在这里插入图片描述][20200114182409367.png]

## 4.2 不单独使用 Gulp-babel 转码，直接使用 Browserify 的 transform 方法引入 Babel. ##

### 4.2.1 package.json ###

{ 
      "name": "gulp_babel",
      "version": "1.0.0",
      "description": "",
      "main": "entry.js",
      "scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "devDependencies": { 
        "babelify": "^8.0.0",
        "babel-core": "^6.26.3",
        "babel-preset-env": "^1.6.1",
        "browserify": "^16.5.0",
        "gulp": "^3.9.1",
        "gulp-watch": "^4.3.11",
        "gulp-uglify": "^3.0.2",
        "vinyl-buffer": "^1.0.1",
        "vinyl-source-stream": "^2.0.0"
      },
      "author": "",
      "license": "ISC",
      "dependencies": { }
    }

### 4.2.2 gulpfile.js ###

直接访问 index.html 展示效果一样。

[Link 1]: https://github.com/slhuang520/study/tree/master/web/es6/gulp/gulp_v3_babel
[20200114181241980.png]: https://img-blog.csdnimg.cn/20200114181241980.png
[20200114182409367.png]: https://img-blog.csdnimg.cn/20200114182409367.png