javascript - How to install and use babel correctly?

Question

Hello everyone, it’s been a while since I asked about babel installation last time. I refreshed myself on npm knowledge. After watching Teacher Ruan Yifeng’s tutorial, I’m finally not so confused. Hey, it’s still the same time since I last asked a question. Improvements
/q/10...
First I created a Babel folder

1 Create a .babelrc file
2 npm init and press Enter to create a package.json file
3 Install npm install --save-dev babel-preset-es2015

 npm install --save-dev babel-preset-react
 写入.babelrc中
 

Installation npm install --save-dev babel-cli
Rewrite the package.json file and add scripts for npm run execution

The directory structure at this time, I wrote a class class Foo{} in hello.js, and everything has been smooth sailing till now

Refer to teacher Ruan Yifeng’s tutorial when npm run build reports an error. babel-node is not easy to use, which makes me confused.
First, I try to delete the lib folder and still get an error. Then read the error message to make sure it is installed. It is the latest version of node and npm. This is the latest version downloaded from the official website without any problem, and npm is also 3.10.10. It may be that there is a problem with the demo package, not npm itself. Please help me solve the problem. Thank you very much

Answer 1

What you lack is basic knowledge of the command line, regardless of npm or babel.

The reason why your npm run build is unsuccessful is that you did not follow the tutorial to create the folder correctly! ! !

The error message is obvious, "src doesn't exist", the src directory does not exist, dear! It’s also confusing to report an error if you don’t understand it!

This is when others tell you that something is wrong, but you see it, but don’t take it into your mind, and then keep wondering why I am wrong, why am I wrong, but others have clearly told you, Babel is very deceived, npm is also very deceived. Babel said that neither labor nor management can find the src directory and I output specific errors. . . . . . .

Okay, let’s go back to the “command line”.

The command generally corresponds to an executable file or script file, usually a string. When you type this command in the shell or cmd, it is equivalent to double-clicking the executable file. What follows the command is called "parameter". How does the system know if there is a certain command? To understand simply, there are two places where the system goes back to search, the global directory and the relative directory. For example, in cmd, there is "Path>" in front of the cursor. This is your current path. When you enter the npm command, the system will first search for the npm executable file in the current directory, and then search for npm in the global path. When you install node, npm is installed globally, so npm is found and executed smoothly.

Okay, let’s explain the npm run command in detail. npm run will search for package.json in the current directory and find the command configured in the script field. You already know this. There is something you don’t know. npm run will temporarily add the node_modules/.bin directory in the current directory to the current system search path list. In other words, npm run build, the command to build our configuration is "babel src - d lib", the system will be asked to execute this command we configured. The character babel is a command, and the system does not recognize it, so it needs to find whether there is a corresponding executable file. There is no corresponding executable file in the current directory, so the directory node_modules/.bin will be searched. If there is no such file, the system will search the global directory. Remember that the search logic for node_modules/.bin is only available when executed in npm run.

npm install --save-dev babel-cli will install babel-cli into node_modules in the project directory, so npm run build can be executed normally. npm run build is equivalent to: project_dir> node_modules/.bin/babel src -d lib

Let’s talk about the babel command, src -d lib. You can guess this without reading the babel documentation. src is the source directory, which tells babel to process the js in the src directory. -d means that I want to declare the target directory parameter. lib is the value of the target directory parameter, which tells babel to escape the js in the src directory to the lib directory.

This is the basic ability to use the command line. . .

Answer 2

If Babel is not installed globally, it cannot be used directly in the console
It can be called through npm script