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

最新推荐文章于 2024-07-16 22:39:22 发布

雾里看花叹朦胧

最新推荐文章于 2024-07-16 22:39:22 发布

阅读量917

点赞数

分类专栏： es6 gulp 文章标签： babel gulpV4 browserify gulp-babel es6

本文链接：https://blog.csdn.net/hsl0530hsl/article/details/103988385

版权

这篇博客介绍了如何在Gulp V4+环境中结合Babel和Browserify来配置ES6的开发环境。主要内容包括解决全局与局部Gulp版本不一致的问题，项目结构，测试代码，.babelrc配置以及gulpfile.js的编写。

摘要由CSDN通过智能技术生成

源码

关于 Gulp V3 的环境配置，请参考如下文章：
使用Gulp(V3.+) + Babel + Browserify 配置ES6的开发环境

如果使用的 Gulp 版本是 V4 以上的，配置相对于 V3 有些许的变化。

1.注意点

往往我们使用的 Gulp 编译命令是使用的全局的 Gulp，而非局部的。所以，如果局部使用了 V4的版本，而全局的Gulp 是 V3 版本的，那么在执行 gulp 命令时，会出现以如下错误信息：

C:\Users\X_XXXXX\xxx\Roaming\npm\node_modules\gulp\bin\gulp.js:129
    gulpInst.start.apply(gulpInst, toRun);
                   ^

TypeError: Cannot read property 'apply' of undefined
    at C:\Users\X_XXXXX\xxx\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
    at Function.Module.runMain (module.js:695:11)
    at startup (bootstrap_node.js:191:16)
    at bootstrap_node.js:612:3

可以先使用如下命令查看一下全局的 gulp 版本信息：
在这里插入图片描述

1.1 解决方式有 2 个

1.1.1 将全局的 gulp 更新到V4

使用如下命令更新 gulp 的版本信息

npm install -g gulp

成功之后，再使用命令查看其版本，如果版本也在 V4 及以上就可以了。

1.1.2 使用局部的 gulp 运行编译命令

在如下路径中执行 gulp 命令：

~gulp_v4_babel\node_modules\gulp\node_modules\.bin>gulp

这样就是使用的局部的 gulp 来进行编译的了。

2. 项目结构

在这里插入图片描述

3. 测试代码

3.1 App.js

class App {
   

    constructor(name){
   
        this.name = name;
    }

    render() {
   
        document.querySelector("#app").innerHTML = "gulp-babel " + this.name;
    }
}

export default App;