Detailed explanation of ES6 problems encountered when writing gulp

Preface

It is an automated build tool that developers can use to automate common tasks during project development. Recently, I reviewed some basic writing methods of gulp. After writing some simple processing of uglify, rename, concat, and clean, I found that I still remember these basic syntaxes. Then I accidentally wanted to write down what the export function would turn out in the demo. It turned out that gulp does not support direct es6 syntax, and the errors in the prompts are also ambiguous.

:182
 throw er; // Unhandled 'error' event
 ^
GulpUglifyError: unable to minify JavaScript

This really gave me a headache for a while, and then I realized that this was a parsing es6 syntax error.

So I installed gulp-babel as mentioned online, then configured a .babelrc file, and then installed @babel/core according to the error prompt. It turned out that the compilation did not report an error, but the file after the editing result still could not be released.

('miniJS', function(){
		 (['', ''])
		 	.pipe(concat(''))
			.pipe(babel())
			.pipe(('./finalFile/'))
})

Later, I simply went to the official website of gulp-babel and realized that gulp-babel was updated 3 months ago, and I updated the latest gulp-babel package. The solutions I searched for were all very early, so naturally they could not match.

Official website prompt method:

# Babel 7
$ npm install --save-dev gulp-babel @babel/core @babel/preset-env

# Babel 6
$ npm install --save-dev gulp-babel@7 babel-core babel-preset-env

So if the gulp-babel version is 8.0.0, just install the package as shown in the figure:

"@babel/core": "^7.1.6",
 "gulp-babel": "^8.0.0",
"@babel/preset-env": "^7.1.6",

This @babel/preset-env package will not report an error even if it is not installed. It is indeed a pitfall. After installing the required package, it is based on the example given by the official website:

.pipe(babel({ 
   presets: ['@babel/env']  
  }))

At the same time, you need to remove the created .babelrc file, as if there is a conflict between the two. The existence of the .babelrc file will not output the compiled file. This way the export keyword will be useful, but in es6

function demoFunc(){
 //something
}
export demoFunc;

This code is effective, but babel() seems to be a code that cannot be parsed and cannot parse the output file. I don’t know what the problem is, and I am also confused.

It is OK to change to the following method:

export function demo(){
	('this is the first gulp demo');
}
 export var num = {};

In this way, uglify can parse es6:

.pipe(babel({
	presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(('file'))

Summarize

The above is the entire content of this article. I hope that the content of this article has a certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.