React with Visual Studio Code and Webpack

写在前面

---

我刚刚开始学习js和react，我的mac有点老迈了所以目前我在windows上开发，在安装了git之后我们就拥有了git bash，这使得我们可以像在类*unix系统上一样在windows上顺畅的编写和运行js代码。

由衷地钦佩那些让git能在windows运行以及发明了node/npm和v8的大神们

我的代码编辑器是vscode，在代码编辑器的选择上，我总是左顾右盼朝三暮四和喜新厌旧的，但是自从遇到了vscode，感觉了却我对所有市面上出现的其他编辑器的兴趣了……哈哈，可谁知道将来会不会有更好的。

VS Code推荐插件

---

一些我认为必要的插件：

1. Eslin - 依赖npm包-eslint，用于检查代码语法问题
2. EditorConfig for VS Code - 定义代码的缩进等
3. typings - 激活intellisense必不可少的npm包，有了它就能实现react，jquery等等代码提示和自动完成了，用法请参考官方指引。

我还安装了一些其他的插件，比如：

• HTML Snippets - 实际上vscode原生支持emmet，这个插件就不那么需要了。
• jQuery Code Snippets - jquery代码模板
• Babel ES6/ES7 - 语法着色
• HTML CSS Support - 一个非常赞的css代码提示插件
• HTML CSS Class Completion - html元素的class属性时会提示css文件中定义好的class样式

使用webpack打包

---

webpack是个资源加载和打包工具，因为它是个非常重要的工具，随着学习的深入我想以后我会专门用一遍博文来写webpack，当下我们主要利用它的自动打包功能，这样修改代码后能自动打包。

打包和项目的目录结构有很大关系，我的示例代码在github上，点击前往。

以下代码片段展示通过webpack将app下的jsx代码转译到assets目录，转译后的文件以应用入口名命名。

//webpack.config.js

//实现应用的代码都在app下，可以设置一个上下文根目录，如果不设置的话默认实项目目录
context: path.join(__dirname, 'app'), 
//指明应用入口名称和对应的代码
entry: { entry: './js/entry.jsx' , comment:'./js/CommentBox.jsx'},

output: {
    path: path.join(__dirname, 'assets'),  //转译后的文件根目录
    filename: '[name].js', //转译后的文件按照应用入口名称命名
    publicPath: '/assets/', //静态资源目录
  },

转译es6语法编写的jsx代码

---

jsx文件是react的代码文件，我们需要使用babel-loader将jsx文件转译成浏览器可以执行的js文件，同时我们的代码全部采用es6语法编写，需要babel能将我们的es6模块代码转译为对浏览器友好commonjs规范的模块代码。需要引入两个preset——babel-preset-es2015和babel-preset-react。

//webpack.config.js

loaders: [
      { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015','react'] } },
  ...
 ]

让npm来接管一切

---

管理依赖

我们需要的物件在前面的小节中都已经提到了，现在需要把这些整合一下让npm来管理。

项目根目录下创建一个package.json文件，你可以使用npm init来创建，我们把依赖的这些物件添加到package.json的依赖声明中，添加完之后执行npm install把依赖的包引入到项目里。

运行react程序并不需要jquery，但是jquery太常用了。

//package.json

"dependencies": {
    "jquery": "^3.1.0",
    "path": "^0.12.7", 
    "react": "^15.3.1",
    "react-dom": "^15.3.1"
  },
"devDependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": ">=6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "webpack": ">=1.13.2",
    "webpack-dev-server": ">=1.15.2"
  }

执行代码转译

运行webpack来转译代码：

webpack --progress --color -d
//或者，通过加入--watch选项自动转译
webpack --progress --color -d --watch

但我们可以通过npm来接管，在package.json文件中增加scripts配置，然后运行npm run watch即可，比起前面的一长串容易多了。

"scripts": {
    "watch": "webpack --watch --progress --colors -d"
  },

在我们编写的html文件直接引用webpack转译后生成的js，就可以开始在浏览器下调试了。这里在安利一个chrome下的react开发工具扩展——React Developer Tools，这个工具要求你必须启动一个http服务才能运行，因此我们需要使用webpack-dev-server，因为我的html文件在app下，所有我加了个--content-base选项。

webpack-dev-server --watch --progress --colors -d --content-base app/

我们一样可以把它加入到package.json中

"scripts": {
    "watch": "webpack --watch --progress --colors -d",
    "watch-server": "webpack-dev-server --watch --progress --colors -d --content-base app/"
  },

到这里，基本的开发和调试react程序的环境已经都弄好了，进入React主页开始学习吧！

---