ES6 + Babel + Gulp + Browserify 的完整设置-JavaScript中文网-JavaScript教程资源分享门户

介绍

在现代Web开发中，前端开发人员必须了解各种技术。您无法体面地开发JavaScript应用程序而不了解ES6，Babel，Gulp和Browserify。本文将向您介绍如何使用这些技术来构建出色的应用程序。

ES6简介

ES6是ECMAScript 6的缩写，它是JavaScript的新版本，推荐使用箭头函数，模板字符串，解构和类。更重要的是，它是一种新语言，考虑了诸如扩展和更好的机制处理同步代码以支持异步流程，等等。

Babel简介

Babel是一个转换器，可以将ES6代码转换为更早版本的JavaScript。这是为了让您的应用程序可以在较旧的浏览器中运行。Babel是一个基于JavaScript的工具，它可以插入一些特殊自定义脚本到您的代码中，在提供更好便携性的同时还保持了一些有趣的Javascript特性

Gulp简介

Gulp是一个任务执行器，可以帮助您自动执行各种任务，例如压缩CSS和JavaScript文件，创建CSS和JavaScripts源映射，运行服务器，编译Sass和Less文件。为了使用Gulp，您需要定义一个Gulp文件，其中定义了所有要执行的任务以及执行任务时要调用的相应操作。

Browserify简介

Browserify是一个模块打包器，它解析模块，分析它们之间的依赖关系，并将它们合并成一个文件。这样，您就可以在浏览器中使用常规的CommonJS模块，而之前，这是无法实现的。Browserify还可以根据您的需要转换Babel。你可以向Browserify添加任何内容，从而能够应对你的项目所需要的包.

建立开发环境

首先，您需要安装Node.js。它可以从官方网站上下载：https://nodejs.org。
在您的终端或控制台中，创建一个新目录，以存储您的应用程序。
在该目录中运行命令行：npm init来创建一个package.json文件。
接下来，您需要安装项目的所有依赖项。运行以下命令：npm install --save-dev browserify babelify vinyl-source-stream gulp gulp-sass browser-sync babel-preset-env babel-preset-react

Gulp 配置

接下来，定义Gulp文件和任务配置。使用您喜欢的代码编辑器，在您的项目目录中创建一个Gulp文件，例如gulpfile.js。在这个文件中，将定义您的Gulp任务，所需插件和操作。

// javascriptcn.com 代码示例
const gulp = require('gulp');
const sass = require('gulp-sass');
const browserify = require('browserify');
const babelify = require('babelify');
const source = require('vinyl-source-stream');
const browserSync = require('browser-sync').create();
const argv = require('yargs').argv;

gulp.task('browser-sync', () => {
    browserSync.init({
        proxy: argv.proxy,
    });
});

// scss tasks
gulp.task('sass', () => {
    return gulp.src('app/scss/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.stream());
});

// js tasks
gulp.task('browserify', () => {
    return browserify({
        entries: 'app/js/app.js',
        debug: true,
        transform: [babelify.configure({
            presets: ['env', 'react'],
        })],
    })
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('dist/js'))
    .pipe(browserSync.stream());
});

// watch task
gulp.task('watch', ['browser-sync'], () => {
    gulp.watch('app/scss/**/*.scss', ['sass']);
    gulp.watch(['app/js/**/*.js', '!app/js/**/*.test.js'], ['browserify']);
});

gulp.task('default', ['watch']);

这个Gulp文件是定义浏览器同步，编译Sass到CSS和编译JS。现在我们已经知道如何使用这些技术来建立一个有用的开发环境。让我们把它们结合在一起。.

应用程序配置

在你的目录中创建一个名为“app”的目录，然后再创建子目录“js”和“scss”。

现在，打开“app/js”目录，创建一个文件app.js，并在其中添加以下内容：

import React from 'react';
import { render } from 'react-dom';

render(
    <h1>Hello, world!</h1>,
    document.getElementById('app')
);

打开“app/scss”目录，创建一个文件style.scss，并添加以下内容：

$primaryColor: #004080;

h1 {
    color: $primaryColor;
}

运行你的应用

为了运行你的应用，您可以在命令行中输入：gulp，然后按回车键。这将启动您的开发服务器，并在您的终端窗口中输出一些日志。当您修改一个js或scss文件时，浏览器会自动刷新您的应用程序以查看更改。

总结

ES6+Babel+Gulp+Browserify这些技术之间的交互可以帮助您创建出色的Web应用程序。在本文中，我们介绍了这些技术的基本知识以及如何将它们结合在一起以创建有用的开发环境。希望本文能够对您的项目和开发工作有所帮助！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654315f47d4982a6ebcbe4c5