gulp4 babel browserify

gulp4 babel browserify参考地址:https://www.jianshu.com/p/fbc65e2cdeb8如何使用es6模块化?使用起来其实非常简单在module1.js中varhello=’helloworld!’;functionsayHello(){console.log(‘hellodear!’)}export{hello,sayHello}//对外暴露在main.js中//在引入的时候使用es6的对象的解构赋值import{hel

大家好,欢迎来到IT知识分享网。gulp4

本文包含以下内容:

  1. 如何利用插件 babel + browserify 在项目中运行es6语法
  2. 如何利用gulp 任务,在项目中运行es6 (包括 js压缩,sass编译)
  3. 错误 :ParseError: ‘import’ and ‘export’ may appear only with ‘sourceType: module’ 的解决方法

地址 : https://gitee.com/amazing_steven/vue_browserify.git

如何在项目中使用es6而不用考虑浏览器是否能够支持尼?

这个需要分2部分来说明,一是 es6语法,一个是模块化引入,这个就分别对应2个插件babel 和 browserify。

这里主要利用gulp 来实现,进入主体了解之前先学习一下下面的小部分内容

在 common.js 中

var hello = 'hello world !';

function sayHello(){
    console.log('hello dear !')
}

export {hello,sayHello} //对外暴露

在 main.js 中

import {hello,sayHello} from './common.js'

console.log(hello); // hello world !

sayHello(); // hello dear !

创建一个.babelrc文件

{
    "presets":["es2015"]
}

此时打开 index.html 时,在控制台中可见报错,因为浏览器无法识别 import 和 export 语法,所以要对js进行编译

在根目录下,使用一下命令安装 babel 和 browserify

$ npm install babel-cli browserify -g
$ npm install babel-preset-es2015 --save-dev

安装完成之后,使用babel将es6编译为es5代码(但包含CommonJS语法)

$ babel js/src -d js/lib

    // -d 左侧是 开发的代码 main.js 和 hello.js 位置
    // -d 右侧是 bable编译后,会自动新建一个文件夹作为 编译后js 文件存放的位置

使用 browserify 编译js

browserify js/main.js -o dist/bundle.js

    // 使用 browserify 编译时,不会自动创建编译后的文件夹,需要事先手动创建
    // -o 左侧是 需要编译的js文件的位置
    // -o 右侧是 编译之后的js存放的位置

编译完成之后,修改 index.html 引入的 main.js 文件的位置

<script type="text/javascript" src="js/main.js"></script>

    修改为

<script type="text/javascript" src="dist/bundle.js"></script>

此时打开 index.html ,打开F12即可看到

hello world !
hello dear !

好了,编译和打包已经完成了,但是如果文件很多,总不能一个一个去添加,所以这里还需要一个监听变化的脚本。

按照上面的逻辑,我们可以使用npm 的watch 来监听文件变化,所有就有了下面的逻辑(这里的代码逻辑上是监听了src/ 下的所有文件,但是实际上是只有在保存时候生效,所以多按几次CTRL + S 吧)

var process = require('child_process');
var fs = require('fs');
var filePath = './src/' ;
fs.watch(filePath,(event,filename)=>{
    if (filename){
        console.log(`${filename}文件发生更新`);
        process.exec("babel src -d dist", function(error, stdout, stderr) {
            console.log("babel src -d dist")
        });
        process.exec("browserify dist/main.js -o bundle.js", function(error, stdout, stderr) {
            console.log("browserify dist/main.js -o bundle.js")
        });
    }
})

额。。。实际操作中的确可以编译

但是 如果项目中的js 文件很多,保存的时候会执行很多次编译,最后我的编辑器跪了T_T

所以果断换了gulp来使用。

gulp 新建任务编译es6

因为上面我们已经全局安装了browseriry,所以只需要安装一下全局的gulp 即 `npm install -g gulp`

之后

package.json

{
  "name": "gulp4",
  "version": "1.0.0",
  "description": "",
  "main": "entry.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@babel/runtime": "^7.8.3",
    "babel-loader": "^8.0.6",
    "babelify": "^10.0.0",
    "browserify": "^16.5.0",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-rev": "^9.0.0",
    "gulp-series": "^1.0.2",
    "gulp-uglify": "^3.0.2",
    "gulp-watch": "^5.0.1",
    "gulp-watch": "^5.0.1",
    "vinyl-source-stream": "^2.0.0"
  }
}

.babelrc

{
  "presets": ["@babel/preset-env"]
}

gulpfile.js

const gulp = require("gulp"),
    babel = require("gulp-babel"),
    uglify = require("gulp-uglify"),
    concat = require("gulp-concat"),
    browserify = require("browserify"),
    source = require("vinyl-source-stream");

gulp.task("babel", function () {
    return gulp.src("./public/es6/*.js")
        .pipe(babel())
        .pipe(uglify())
        .pipe(gulp.dest("js/"));
});

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

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

gulp.task("default", gulp.series(["browserify"])); //默认编译,但不会监听

运行之后果然,完美编译。

最后稍微优化一下,加上监听和文件清除(确保每次编译出来的都是最新的内容)

const gulp = require("gulp"),
    babel = require("gulp-babel"),
    uglify = require("gulp-uglify"),
    concat = require("gulp-concat"),
    browserify = require("browserify"),
    source = require("vinyl-source-stream");
    watch = require('gulp-watch');
    clean = require("gulp-clean");

const path = "./static/public/es6/"; //开发代码位置
const dist = "./static/bundle/"; // 编译后的代码位置

gulp.task("clean", function () {
    return gulp.src(dist+"/*.js")
        .pipe(clean())
});

gulp.task("babel", gulp.series(["clean"],function () {
    return gulp.src(path+"*.js")
        .pipe(babel())
        .pipe(uglify())
        .pipe(gulp.dest(dist));
}));

gulp.task("browserify", gulp.series(["babel"], function () {
    var b = browserify({
        entries: dist+"main.js"
    });

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

gulp.task('auto',function () {
    watch(path+'*.js',  gulp.series('browserify'));
})


上面已经说了js的编译和压缩,这里再多说一下如何打包sass 

const gulp = require("gulp"),
    concat = require("gulp-concat"),
    watch = require('gulp-watch');
    clean = require("gulp-clean");
    autoprefixer = require('gulp-autoprefixer'),
    uglifycss = require('gulp-uglifycss'), 
    sass = require("gulp-sass"),     
    cssmin = require('gulp-clean-css'),
    cssver = require('gulp-make-css-url-version'),
    rename = require('gulp-rename');

//开发代码位置
const path = "./lib/**/*.js"; 

// 编译后的代码位置
const dist = "./dist/"; 

gulp.task('sass', function () {
    // 找到 src/css/ 下的所有 css 文件
    return gulp.src(path_css)
        .pipe(sass({ style: 'expanded' }))
        // 添加前缀(如:-webkit-)
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        // 合并为一个css
        .pipe(concat('common-style.css'))
        // 合并后的css 保存到 dist/css 下
        .pipe(gulp.dest(dist_css))
        .pipe(rename('common-style.min.css'))
        .pipe(cssver())
        .pipe(cssmin())
        .pipe(gulp.dest(dist_css));
});

gulp.task('default',function () {
    watch(path_css, gulp.series("sass"));
})

ParseError: ‘import’ and ‘export’ may appear only with ‘sourceType: module’

在编译的过程中遇到了以上错误,这里参考https://www.e-learn.cn/content/wangluowenzhang/1090546 找了解决方案。

即: 更改browserify 的任务代码如下

gulp.task("babel", gulp.series(["clean"],function () {
    return gulp.src(path)
        .pipe(babel())
        .pipe(uglify())
        .pipe(gulp.dest(dist));
}));

 

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/12715.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信