建站
咨詢
售后
建站咨詢
新聞中心
本文小編為大家詳細(xì)介紹“gulp+browserify編譯es6錯(cuò)誤如何解決”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“gulp+browserify編譯es6錯(cuò)誤如何解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。
創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的長陽網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
環(huán)境搭建
首先使用npm初始化一個(gè)package.json文件
$ npm init
然后需要安裝gulp和browserify到本地項(xiàng)目中
$ npm install –save-dev gulp
$ npm install –save-dev browserify
接著還需要安裝兩個(gè)輔助的工具babelify 和 vinyl-source-stream
$ npm install –save-dev babelify
$ npm install –save-dev vinyl-source-stream
上面所有工具安裝完成以后在package.json文件中會(huì)有以下依賴
devDependencies: {
babel-preset-es2015: "^6.18.0",
babelify: "^7.3.0",
browserify: "^13.3.0",
gulp: "^3.9.1",
vinyl-source-stream: "^1.1.0"
}
編寫代碼
首先在根目錄下新建一個(gè)文件onmpw.es6.js
import {onmpw} from "./lib/onmpw";
var moma;
export default moma = function(){
onmpw ();
console.log('es6');
}
window.moma = moma;
然后在根目錄下新建gulpfile.js文件。編寫以下代碼
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
gulp.task('onmpw',function(){
return browserify({
entries: "./onmpw.es6.js",
debug: true,
})
.transform(babelify)
.bundle()
.pipe(source('onmpwes6.js'))
.pipe(gulp.dest('dist')); })
gulp.task('default',['onmpw']);
然后運(yùn)行g(shù)ulp
$ gulp
這里我們在根目錄下運(yùn)行g(shù)ulp，并且gulpfile.js文件也在根目錄下。所以gulp會(huì)自動(dòng)讀取gulpfile.js文件。如果gulpfile.js文件不再根目錄下，我們還需要指定gulpfile.js所在位置。
$ gulp –gulpfile gulpfile.js所在目錄
運(yùn)行上述命令，順利情況下會(huì)編譯成功
[22:31:23] Using gulpfile /www/onmpw_plugins/ gulpfile.js
[22:31:23] Starting 'onmpw'...
[22:31:26] Finished 'onmpw' after 3.12 s
[22:31:26] Starting 'default'...
[22:31:26] Finished 'default' after 39 μs
但是事情總不是那么順利，這時(shí)很可能會(huì)報(bào)一下錯(cuò)誤
events.js:160
throw er; // Unhandled 'error' event
^
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'
錯(cuò)誤解決
出現(xiàn)上述錯(cuò)誤，我們首先就要去檢查各個(gè)工具的版本。在package.json文件中我們可以找到browserify和babelify的版本分別為13.3.0和7.3.0。這是非常新的版本，需要借助babel-preset-es2015工具（至于其原理是什么，大家可以自行去腦補(bǔ)）。
$ npm install –save-dev babel-preset-es2015
然后修改gulpfile.js內(nèi)容中的
return browserify({
entries: "./onmpw.es6.js",
debug: true,
})
.transform(babelify)
改為
return browserify({
entries: "lib/momaEntry.js",
debug: true,
})
.transform(babelify.configure({
presets:['es2015']
}))
也可以在根目錄下新建 .babelrc 文件，然后寫入以下內(nèi)容
{
presets:['es2015']
}
兩種方式都是可以的。
當(dāng)然了，既然知道是版本太新所引起的。除了上面添加輔助工具以外，還可以降低工具的版本。我自己經(jīng)過試驗(yàn)，得出只是降低babelify的版本為6.0.2即可。
$ npm install –save-dev babelify@6.0.2
package.json依賴工具的內(nèi)容如下
devDependencies: {
babel-preset-es2015: "^6.18.0",
babelify: "^6.0.2",
browserify: "^13.3.0",
gulp: "^3.9.1",
vinyl-source-stream: "^1.1.0"
}
這樣我們就可以不用借助babel-preset-es2015這個(gè)工具了。也不用再修改gulpfile.js既可編譯成功。
讀到這里，這篇“gulp+browserify編譯es6錯(cuò)誤如何解決”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當(dāng)前標(biāo)題：gulp+browserify編譯es6錯(cuò)誤如何解決
網(wǎng)站鏈接：http://www.dlmjj.cn/article/jjosdh.html
