通过npm安装Babel和React_babel-preset-react.min.js-CSDN博客

本文链接：https://blog.csdn.net/weixin_38017243/article/details/82949128

开发环境babel安装：

在装好了node.js并可以正常使用npm指令的情况下,如果没有，则先安装node.js，官网下载安装即可；

先创建好要写的项目的文件夹
在项目文件夹中按住shift+鼠标右键，选择“在此处打开终端”（或其他类似的说法）
然后可以参考https://www.babeljs.cn/docs/setup根据自己的编辑器选择指令输入终端并执行
我的是webstrom，所以选择了 $ npm install --save-dev babel-cli
执行完成后就已经可以使用babel了，

HTML测试代码：

<div id="output">
</div><!-- 加载 Babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js">
</script><!-- 你的脚本代码 -->
<script type="text/babel">
	const getMessage = () => "Hello World";
	document.getElementById('output').innerHTML = getMessage();
</script>

react的安装：

同样的位置打开终端（cmd），然后安装两个包：

$ npm install webpack -g
$ npm install webpack-dev-server -g
然后初始化

$ npm init

这一步会跳出很多东西，跳出name的时候可以输入一下自己的项目名称，author可以输一下项目作者，不输入也没关系，一只回车直到：Is this ok?(yes)的时候输入yes回车即可，这时文件夹中会产生package.json
添加包及一些插件：

$ npm install react --save
$ npm install react-dom --save
$ npm install babel-core
$ npm install babel-loader
$ npm install babel-preset-react
$ npm install babel-preset-es2015
可以发现文件夹的node_modules文件夹中，有babel和react的的包了。
通过在Html文件中导入react包之后进行使用：

<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>

babel和react都安装完成后的代码样例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="output"></div>
<!-- 加载 Babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 导入react包-->
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- 你的脚本代码 -->
<script type="text/babel">

    ReactDOM.render(<h1>Hello, React!</h1>,document.getElementById("output"));
</script>
</body>
</html>

ps:安装完成后的react只适合开发者使用，如果要投放到生产环境，会有其他的操作。