This article was first published on my own bloating blog site:Using gulp and bable to compile ES6 code in real time，The blog uses a source of open source, based on thinkjs and vuejs development, welcome you to stroll around.
Problem description
> A large and complete Java framework is used in the project development. the framework integrates the front-end and the back-end. the front-end develops JSP pages on the basis of this framework, and the front-end and back-end are not completely separated. Now we have some JS code that uses ES6 syntax, but then we have IE compatibility problems and we have toHow easy it is to convert code to ES5, ES6’s template strings. Alas
> ### What methods have you tried?
> At present, the simple configuration of the lower babel, ES6 source placed in a directory src, Babel translated code into a directory dist, but each time the code has to change the conversion of manual knock commands, it is also troublesome. So I would like to ask my friends who are familiar with webpack.The code can be compiled automatically by webpack and Babel, that is, “hot update”. But what we need to note here is that it is not packaged, but a bunch of JS files translated into another stack of JS files.
I started with Baidu failing, and then asked for help on the segmentface how to use webpack to update ES6 code to Es5 code hot? (Note that it’s not packaged), got a reminder from a front-end developer, and got to work on my own to implement my requirements. Basically overThe course is as follows:
Initialize the project with NPM and create code input and output directories
This process is slightly, after initialization completes, mainly is produces package.json, uses to manage the dependence.
Create two directories, such as one where the SRC is the source file directory, where the JS you write are placed, and the other where the dist directory, the Babel translated directory, is referenced in the page.
Installing gulp and bable tools
1. Install gulp
npm install --g gulp npm install gulp --save-dev
2. Install Babel and related plug-ins
npm install -g babel-cli // Note that the version is 6.xx. npm install babel-cli --save-dev npm install babel-preset-env --save-dev //babelCompile template npm install babel-plugin-transform-remove-strict-mode // Remove global strict mode at compile time
3. Install the gulp-babel plug-in, noting that the version is 7.xx, related to the Babel version, as detailed in [github] (https://github.com/babel/gulp-babel)
npm install gulp-babel@7 --save-dev
4. Installing real-time compilation plug-ins
npm install --save-dev gulp-watch
Writing corresponding configuration files
1. babelConfiguration file.Babelrc
Create the file under the project root directory and write the following contents:
{ "presets": [ [ "env", { "modules": false } ] ], // It seems that the modules here is false, which can identify this and is useful in browser environment. "plugins": ["transform-remove-strict-mode"] }
2. gulpConfiguration file gulpfile.js
1 var gulp = require("gulp"), 2 babel = require("gulp-babel"), 3 watch = require("gulp-watch"); 4 5 gulp.task("babeljs", function() { 6 return gulp.src("src/*.js") // Input directory 7 .pipe(babel()) 8 .pipe(gulp.dest("dist/")); // Output directory 9 }); 10 gulp.task("watch", function() { // Real-time monitoring 11 gulp.watch('src/*.js', ['babeljs']); 12 }); 13 14 gulp.task('default', ['watch', 'babeljs']);
OK，The last step
In the project root directory, execute gulp, and then modify the JS file under src, you will find that it will be translated into the dist directory in real time.
Existing problems
If there are syntax errors when writing code, real-time monitoring of gulp will exit, so this solution is still not intelligent enough.