Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "how to solve es6 errors in gulp+browserify compilation", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to solve es6 errors in gulp+browserify compilation" article.

Environment building

First initialize a package.json file using npm

$npm init

Then you need to install gulp and browserify into the local project

$npm install-save-dev gulp

$npm install-save-dev browserify

Then you need to install two auxiliary tools, babelify and vinyl-source-stream.

$npm install-save-dev babelify

$npm install-save-dev vinyl-source-stream

After all the above tools are installed, you will have the following dependencies in the package.json file

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"

}

Write code

First create a new file onmpw.es6.js in the root directory

Import {onmpw} from ". / lib/onmpw"

Var moma

Export default moma = function () {

Onmpw ()

Console.log ('es6')

}

Window.moma = moma

Then create a new gulpfile.js file in the root directory. Write the following code

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'])

Then run gulp

$gulp

Here we run gulp in the root directory, and the gulpfile.js file is also in the root directory. So gulp automatically reads the gulpfile.js file. If the gulpfile.js file is no longer in the root directory, we also need to specify the location of the gulpfile.js.

$gulp-the directory where gulpfile gulpfile.js is located

Run the above command, and it will be compiled successfully.

[22:31:23] Using gulpfile / www/onmpw_plugins/ gulpfile.js

[22:31:23] Starting 'onmpw'...

[22:31:26] Finished 'onmpw' after 3.12s

[22:31:26] Starting 'default'...

[22:31:26] Finished 'default' after 39 μ s

But things are not always going so well, and a mistake is likely to be reported at this time.

Events.js:160

Throw er; / / Unhandled 'error' event

^

SyntaxError: 'import' and' export' may appear only with 'sourceType: module'

Error resolution

When the above error occurs, we first have to check the version of each tool. In the package.json file, we can find that the versions of browserify and babelify are 13.3.0 and 7.3.0, respectively. This is a very new version and requires the help of the babel-preset-es2015 tool (as for how it works, you can make it up to your own brain).

$npm install-save-dev babel-preset-es2015

Then modify the

Return browserify ({

Entries: ". / onmpw.es6.js"

Debug: true

})

.transform (babelify)

Change to

Return browserify ({

Entries: "lib/momaEntry.js"

Debug: true

})

.transform (babelify.configure ({

Presets: ['es2015']

}))

You can also create a new .babelrc file in the root directory and write the following

{

Presets: ['es2015']

}

Both ways are possible.

Of course, since we know that it is caused by the new version. In addition to adding assistive tools above, you can also reduce the version of the tool. Through my own experiments, I have come to the conclusion that it is only possible to reduce the babelify version to 6.0.2.

$npm install-save-dev babelify@6.0.2

The contents of the package.json dependency tool are as follows

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"

}

So we don't have to use babel-preset-es2015 as a tool. There is no need to modify gulpfile.js to compile successfully.

The above is about the content of this article on "how to solve gulp+browserify compilation es6 errors". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.