1.下载node.js
Node.js官网下载 , 安装;
安装成功后在控制台输入node -v 可查看当前版本:
$ node -v
v10.15.0
输入npm -v查看npm版本:
$ npm -v
6.4.
2.创建项目
1.安装各种需要的依赖:
-
npm install --save react
- 安装React. -
npm install --save react-dom
安装React Dom,这个包是用来处理virtual DOM。这里提一下用React Native的话,这里就是安装react-native。 -
npm install --save-dev webpack
- 安装Webpack, 模块打包工具. -
npm install --save-dev webpack-dev-server
- webpack官网出的一个小型express服务器,主要特性是支持热加载. -
npm install --save-dev babel-core
- 安装Babel, 可以把ES6转换为ES5,注意Babel最新的V6版本分为babel-cli和babel-core两个模块,这里只需要用babel-core即可。 -
npm install --save babel-polyfill
- Babel includes a polyfill that includes a custom regenerator runtime and core.js. This will emulate a full ES6 environment -
npm install --save-dev babel-loader
- webpack中需要用到的loader. -
npm install --save babel-runtime
- Babel transform runtime 插件的依赖. -
npm install --save-dev babel-plugin-transform-runtime
- Externalise references to helpers and builtins, automatically polyfilling your code without polluting globals. -
npm install --save-dev babel-preset-es2015
- Babel preset for all es2015 plugins. -
npm install --save-dev babel-preset-react
- 用于将 JSX 和其他东西编译到 JavaScript npm install --save-dev babel-preset-stage-2
- All you need to use stage 2 (and greater) plugins (experimental javascript).
2.打开 package.json
然后添加下面的scripts:
"scripts": {
"start": "webpack-dev-server --hot --inline --colors --content-base ./build",
"build": "webpack --progress --colors"
}
为项目创建一个目录: mkdir webpack-react-tutorial && cd webpack-react-tutorial
创建一个用于保存代码的最小目录结构:mkdir -p src
通过运行来启用项目:npm init -y
到此项目建立完成!
懒得码字 本段来源作者:瘦人假噜噜
链接:https://www.jianshu.com/p/324fd1c124ad