使用 React + baas 搭建 blog 实录一

Question

使用 webpack，babel 搭建 React 基本开发环境，完成 Hello，world。

如果下述命令不方便执行，可以直接执行 git clone https://github.com/renaesop/react-leancloud-blog.git && cd react-leancloud-blog && git reset --hard 56a9c26 && npm i, 然后全局安装webpack之后即可构建

1. 初始化 npm 项目，添加 .gitignore 等

• git init 初始化git项目，将会产生.git文件夹
• echo ".idea n node_modules n logs n *.log n" > .gitignore 用于设定被git Track的文件列表
• npm init并按照提示操作，将产生package.json，也就是npm项目的元描述文件

2. 添加 React，以及相应的 babel 插件

• npm i --save react react-dom 引入react，react-dom
• npm i --save babel-core 引入babel
• echo "{"presets": ["es2015", "react"]}" > .babelrc 设定 babel 的插件
• npm i --save-dev babel-preset-es2015 babel-preset-react 安装 babel 所需的插件集，注意 preset 相当于一系列的 plugin

3. 添加 webpack，完成 Hello， world！

• npm i --save-dev webpack 安装 webpack
• npm i --save-dev babel-loader 增加 webpack 的一个 loader，babel-loader
• touch webpack.config.js 添加 webpack 配置文件
• 编辑 webpack.config.js，其中内容见文件链接
• 新增 html 入口文件 index.html，其中内容见文件链接
• 新增文件夹 src，并在 src下新建文件，entry.jsx，其中的内容如文件链接

4. 构建并运行

• npm i -g webpack 全局安装个 webpack（其实并不一定要全局安装，不过这里为了简单，暂时不描述不全局安装）
• webpack 执行构建
• 打开 index.html 应该能够看到 Hello，world！

5. 增加代码风格检测

• echo "{"extends": "airbnb"}" > .eslintrc 新增 eslint 的配置，继承自 airbnb
• echo "node_modules/**/* n dist/**/*" > .eslintignore 新增 eslint 忽略文件的配置
• npm i --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint
• 更新 webpack.config.js 的配置， 执行 npm run lint
• 如果使用 webstorm， 可以在 preference 中搜索到 eslint，并启用

Answer 1

补充：package.json中添加

"scripts": {
"lint": "node_modules/.bin/eslint src//*.jsx src//*.js"
}

方可执行 npm run lint

webpack 执行构建命令为webpack --display-error-details