使用gulp編譯es6 , less 代碼

傳統的js代碼是不支持箭頭函數 和 es6的繼承特性的  寫個類 ， 繼承還要寫個閉包 ， call ， prototype。。菜鳥的我 表示挺麻煩的 挺麻煩的

這個只是把幕課網上配置的視頻簡化成文字 ，  下次使用的時候不用再次打開視頻

 

1.新建項目文件  src  src目錄下新建 css js less gulpfile.js webpack.config.js文件   www目錄下新建css  js  index.html文件

2.初始化項目 npm init , 安裝依賴 cnpm install babel-core babel-loader babel-present-es2015 gulp gulp-less gulp-util webpack-stream --save-dev

3.編寫gulp編譯的配置文件 ， 

const gulp = require("gulp");
const webpack = require('webpack-stream');

gulp.task('webpack' , () => {
    //轉譯javascript
    //webpack 配置
    const config = require('./webpack.config.js');
    gulp.src('./js/**/*.js')
        .pipe(webpack(config))
        .pipe(gulp.dest('../www/js'));
})

gulp.task('less' , () => {
    const less = require('gulp-less');
    gulp.src('./less/*.less')
        .pipe(less())
        .pipe(gulp.dest('../www/css'));
});

gulp.task('default' , ['webpack' , 'less']);

gulp.task('watch' , () => {
    gulp.watch('less/**/*.less' , ['less']);
    gulp.watch('js/**/*.js' , ['webpack']);
})

 

4.編寫webpack的配置文件

module.exports = {
    entry:{
        index:'入口文件'
    },
    output:{
        filename:"[name].js"
    },
    devtool:'source-map',
    resolve:{
        extensions:['.js']
    },
    module:{
        rules:[
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules$/,
                query: {
                    presets: ['es2015']
                }
            }
        ]
    }
}