【目前弃用webstorm，内存太小，跑不起来重量级IDE,改用轻量级vscode，用法一致 】
1. 环境配置：
- 需要配置webstorm IDE的默认设置：javascript language version: JSX harmony
配置git 测试工具一类的 - 创建一个项目，也可以从git checkout下来。
- 在项目git ，给项目安装一些包。
输入 cnpm init （配置最初的package.json配置文件）
安装 webpack babel react
cnpm install webpack --save-dev
cnpm install webpack babel-loader babel-core babel-preset-es2015 --save-dev
终端输入以下代码对react和react-dom进行安装
cnpm install react react-dom --save-dev
Babel针对React的所有的预设插件
cnpm install babel-preset-react --save-dev
- 给项目配置webpack的配置文件，配置出口入口和babel
我们创建入口文件夹和入口文件 和出口文件夹
然后，写一个config.js文件，指明入口出口
module.exports = {
entry: "./app.js",
output: {
path: __dirname+"/dist",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
]
},
resolve: {
extensions: ['','.coffee','.js']
}
}
由于我们增加了react的预设插件，所以需要对webpack.config.js进行修改。
将module -> loaders下面的query修改如下：
query: {
presets: ['es2015','react']
}
- 开始创建一些react的组件 并开始引用
- 运行webpack 打包 成一个bundle.js
- html 引用这个打包结束的js
- 运行调试
