使用webpack或者 gulp进行ES6开发

最新推荐文章于 2023-07-25 11:16:49 发布

徐行莫停

最新推荐文章于 2023-07-25 11:16:49 发布

阅读量1k

点赞数

分类专栏：前端工具

本文链接：https://blog.csdn.net/qq_35765126/article/details/79207640

版权

前端工具专栏收录该内容

3 篇文章 0 订阅

订阅专栏

不看ES6好久了，今天想回顾一下却发现忘记怎么配置了，又重新学了一遍在呢么使用这两个构建工具。

webpack+ES6

首先建一个工程
目录结构如下
这里写图片描述
1.初始化工程

    npm init

2.安装webpack

        npm install webpack -g

3.配置webpack.config.js

        var path = require('path');
        module.exports = {
          entry: "./es6/index.js",   //入口文件
          output: {  //输出文件
            path: __dirname,
            filename: "bundle.js"    //运行webpack后会生成一个bundle.js文件
          },
          module: {
            loaders: [     //项目中用到的加载器
              {
                test: path.join(__dirname, 'es6'),
                loader: 'babel-loader',
                query: {
                  presets: ['es2015']
                }
              }
            ]
          }
        }

4.安装工具

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

然后我们开始以简单的项目
index.html

        <!DOCTYPE html>
        <html>
        <head>
          <meta charset="UTF-8">
          <title>Document</title>
        </head>
        <body>
          <script src="bundle.js"></script>
        </body>
        </html>

child.js

    class child{
        constructor(name, age){
          this.name = name;
          this.age = age;
        }

        say(){
          return `姓名：${this.name},年龄：${this.age}。`;
        }
      }

      export default child;

index.js

    import child from './child.js';

    let p = new child('lorry', 21);
    document.write(p.say());

运行

webpack --watch
或者 webpack -w

gulp+ES6

首先建一个项目文件夹，
下面是项目结构
这里写图片描述


gulptest
    app------ES6代码写在这个文件夹里
        js
            index.js
    dist------编译后的文件在这里
        js
        index.html
    gulpfile.js

接下来安装工具

初始化项目
```
    npm init
```
安装gulp

            npm install gulp --save-dev

安装ES6转码器gulp-babel

babel-preset-es2015是转码规则

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

安装其他

        npm install babel-core --save-dev
        npm install gulp-rename gulp-concat gulp-uglify gulp-cssnano browserify vinyl-source-stream --save-dev

gulp-rename 重命名文件
gulp-concat 合并文件
gulp-uglify 压缩js文件
gulp-cssnano 压缩css文件
browserify 如果使用了ES6的import，export就要使用 bowserify 转成require、export，生成boundle.js文件
vinyl-source-stream 将Browserify的bundle()的输出转换为Gulp可用的vinyl（一种虚拟文件格式）流

安装完工具就开始配置gulpfile.js文件

        const gulp = require('gulp');
        const babel = require('gulp-babel');
        const uglify = require('gulp-uglify');
        const rename = require('gulp-rename');
        const cssnano = require('gulp-cssnano');
        const concat = require('gulp-concat');
        const browserify = require('browserify');
        const source = require('vinyl-source-stream');

        // 编译并压缩js
        gulp.task('convertJS', function(){
          return gulp.src('app/js/*.js')    //es6代码         
            .pipe(babel({
              presets: ['es2015']
            }))
            .pipe(uglify())
            .pipe(gulp.dest('dist/js'))      //编码后存放在dist文件夹下的js文件夹
        })

        // 合并并压缩css
        gulp.task('convertCSS', function(){
          return gulp.src('app/css/*.css')
            .pipe(concat('app.css'))
            .pipe(cssnano())
            .pipe(rename(function(path){
              path.basename += '.min';
            }))
            .pipe(gulp.dest('dist/css'));
        })

        // 监视文件变化，自动执行任务
        gulp.task('watch', function(){
          gulp.watch('app/css/*.css', ['convertCSS']);
          gulp.watch('app/js/*.js', ['convertJS', 'browserify']);
        })

        // browserify
        gulp.task("browserify", function () {
            var b = browserify({
                entries: "dist/js/index.js"          //
            });

            return b.bundle()
                .pipe(source("bundle.js"))
                .pipe(gulp.dest("dist/js"));
        });

        gulp.task('start', ['convertJS', 'convertCSS', 'browserify', 'watch']);

测试一下
main.js

    class Person{
    constructor(){
      document.write("a");
    }


  }
  export default Person;

index.js

import Person from './main.js';

let p = new Person();

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script src="./js/bundle.js"></script>
</body>
</html>

运行

gulp start

徐行莫停

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用webpack或者 gulp进行ES6开发

不看ES6好久了，今天想回顾一下却发现忘记怎么配置了，又重新学了一遍在呢么使用这两个构建工具。webpack+ES6首先建一个工程目录结构如下 1.初始化工程 npm init2.安装webpack npm install webpack -g3.配置webpack.config.js var path = requ
复制链接

扫一扫