"01" Webstorm Configuration Babel Converter

"01" converter
01, configure Babel.
02, with Webstorm. Note The version number of the Webstorm.
03,the Babel is automatically compiled using Webstorm's own file watcher. some Babel libraries need to be installed.
,Global Installation BABEL-CLI. (Some tutorials let the global installation Babel, in fact the new Babel is already integrated in the BABEL-CLI. )

npm install -g babel-cli      

05, or itemInstall BABEL-CLI (toin Filewatcher's Babel setup, select the Babel address in the program. )

install--save-dev 

Konjac Testing:

C:\USERS\MIKI>NPM Install BABEL-CLI babel-preset-env-g

C:\Users\Miki\AppData\Roaming\npm\babel-doctor-C:\Users\Miki\AppData\Roaming\npm\node_modules\babel-cli\ Bin\babel-doctor.js

C:\Users\Miki\AppData\Roaming\npm\babel-node-C:\Users\Miki\AppData\Roaming\npm\node_modules\babel-cli\bin\ Babel-node.js

C:\Users\Miki\AppData\Roaming\npm\babel-external-helpers-C:\Users\Miki\AppData\Roaming\npm\node_modules\ Babel-cli\bin\babel-external-helpers.js

C:\Users\Miki\AppData\Roaming\npm\babel-C:\Users\Miki\AppData\Roaming\npm\node_modules\babel-cli\bin\ Babel.js

NPM WARN Optional Skipping optional DEPENDENCY: [email protected] (node_modules\babel-cli\node_modules\fsevents):

NPM WARN notsup skipping OPTIONAL dependency:unsupported platform for [e-mail protected]: wanted {"OS": "Darwin", "Arch": "An Y "} (current: {" OS ":" Win32 "," Arch ":" x64 "})

+ [email protected]

+ [email protected]

Added 196 packages in 56.912s

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 babel.

Begin: Konjac: It seems that after the global installation of Babel, the configuration of Babel is set up automatically.

End: Konjac

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

------------------Note

Under the Linux system, the corresponding directory path needs to be modified to/

Source: http://blog.csdn.net/peade/article/details/76522177

**

"01" Webstorm Configuration Babel Converter