React with Visual Studio Code and Webpack

写在前面

VS Code推荐插件

使用webpack打包

转译es6语法编写的jsx代码

让npm来接管一切
管理依赖

执行代码转译

写在前面

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

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

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

VS Code推荐插件

一些我认为必要的插件：

Eslin - 依赖npm包-eslint，用于检查代码语法问题

EditorConfig for VS Code - 定义代码的缩进等

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",

4000
"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主页开始学习吧！