Webstorm + Babel

There's a lot on the web about how to set up Babel. I learned to set up, but the total difference was so few steps, did not meet my needs.

I am using the webStorm2017.1 version.

Babel Installation Preparation

Some Babel libraries need to be installed before you can automatically compile Babel in Filewatcher with Webstorm

Global Installation Babel-cli

NPM install-g BABEL-CLI

Some tutorials on the web Let the Global installation Babel, in fact the new Babel has been integrated in the BABEL-CLI. Other than that.

Some tutorials on the web are BABEL-CLI for project installation. The NPM install BABEL-CLI--save-dev Project installation is also possible, but in Filewatcher's Babel settings, select the Babel address in the program.

Installing additional Babel libraries

NPM Install--save-dev babel-preset-env

Many tutorials on the web require the installation of babel-preset-es2015, which, when actually compiled, uses the default settings of Webstorm, and the compilation is unsuccessful. Env This package, according to the ES6 run environment to compile JS, and unordered specify which specific ES version.

. BABELRC

Create the. babelrc file under the project root directory, which is the same directory as Package.json. "This file is not required"

Many online tutorials recommend the contents as: {"presets": ["es2015"]}. The content here needs to be set according to your needs. Webstorm The default settings, in fact, do not need the online recommendation content.

With. BABELRC, you can implement more features.

Webstorm Open ES6

File-setting-languages & Frameworks-javascript

In the box on the right, select ECMASCRIPT6

Babel settings in File Watcher

The path in the Webstorm: File-setting-tools-file Watcher,

On the right side of the + sign open a new window, select Babel, in the middle of the picture will appear bebel.

Double-clicking the Babel will enter the Babel Settings screen.

In this interface, there are three places to set, program,arguments, Output paths to refresh

The setting here is very important, the online tutorial, basically did not on these three detailed introduction.

Program if the global installation of BABEL-CLI, the default is good here. If the project is installed, the right ... To the project's Node_modules folder, locate the Babel file under the. bin folder, and click OK.

Arguments default is: $FilePathRelativeToProjectRoot $--out-dir Dist--source-maps--presets env

Output paths to refresh defaults to: dist\ $FileDirRelativeToProjectRoot $\ $FileNameWithoutExtension $.js:dist\$ Filedirrelativetoprojectroot$\ $FileNameWithoutExtension $.js.map

The result of running the compilation is this.

The dist directory is not necessarily the directory we want. We want to put the compiled files are placed in the JS directory, so the arguments in the dist changed to JS. As a result, compiled files are nested like this.

To solve this constant nesting problem, you need to put the output paths to refresh in the Dist, the same as JS, there will be no such nested compilation.

My goal is to compile this structure of JS

My settings are: This allows the compiled file and the original file in the same folder

Arguments:

$FilePathRelativeToProjectRoot $--out-file $FileDir $\ $FileNameWithoutExtension $-compile.js--source-maps--presets Env

Output Paths to refresh:

$FileDir $\ $FileNameWithoutExtension $-compile.js: $FileDir $\ $FileNameWithoutExtension $-compile.js.map

Webstorm + Babel