您好,登錄后才能下訂單哦!
這篇“gulp+browserify編譯es6錯(cuò)誤怎么解決”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“gulp+browserify編譯es6錯(cuò)誤怎么解決”文章吧。
環(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
這里我們?cè)诟夸浵逻\(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既可編譯成功。
以上就是關(guān)于“gulp+browserify編譯es6錯(cuò)誤怎么解決”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對(duì)大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。