Shulou(Shulou.com)05/31 Report--

This article editor for you detailed introduction of "gulp+browserify compilation es6 errors how to solve", the content is detailed, the steps are clear, the details are handled properly, I hope this "gulp+browserify compilation es6 errors how to solve" article can help you solve doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

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.

Read here, this article "how to solve gulp+browserify compilation es6 errors" article has been introduced, want to master the knowledge of this article also need to practice and use to understand, if you want to know more about the article, welcome to follow 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.