react-webpack-babel环境搭建

demo
原文

1、创建学习目录

mkdir learn
cd learn

2、npm初始化项目

npm init //根据相关提示完善信息，入口js文件：src/index.js

3、安装相关模块

安装相关react npm包，并且使用es2015（也就是es6支持，需要babel-preset-es2015包），因为我之前做个一些js相关项目，所以部分npm包已经全局安装，比如webpack等等，大家根据提示补足自己的npm包即可

npm install --global webpack
npm install --save react
npm install --save react-dom
npm install --save babel-loader
npm install --save babel-preset-es2015
npm install --save babel-preset-react

4、创建相关文件目录结构

mkdir src //存放源文件
mkdir build //存放编译后的js文件

5、创建webpack配置文件（webpack好强大，之后再做详细的学习）

touch webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
entry:[
  './src/index.js'
],
output: {
  path: './build/',
  filename: 'bundle.js'
},
  module: {
      loaders: [{
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015','react']  
        }
      }]
  }
};

6、创建index.js源文件，书写经典的Hello World！

touch src/index.js

1
2
3
4
5
6
7
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);

7、利用webpack编译源文件

根目录下直接运行webpack，运行完成后会在build目录生成bundle.js文件

$ webpack

1
2
3
4
5
6
7
Hash: 32a8e736b4323f7ec350
Version: webpack 1.12.9
Time: 1318ms
  Asset    Size  Chunks             Chunk Names
bundle.js  676 kB       0  [emitted]  main
 [0] multi main 28 bytes {0} [built]
  + 159 hidden modules

8、创建index.html承载体文件，引入bundle.js，方便在浏览器中运行

touch build/index.html

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>React环境搭建</title>
</head>
<body>
  <div id="example"></div>
</body>
<script src="bundle.js"></script>
</html>

9、浏览器直接打开index.html，出现Hello world！

下一步就是搭建调试环境

tools

Node.js安装和NPM包管理器使用

demo

在Windows上安装Node

Node从0.6.0版本开始支持Windows，要在Windows上安装Node，只用从nodejs下载node-v*.msi，然后双击运行即可，然后你可能会遇到安全对话框。
一直下一步完事儿

运行Node

现在已经可以运行Node了，你可以先简单的体验一下Node的命令行交互界面（CLI:command-line interface），只需要调用Node可执行文件就行：

1
$ node

1
2
3
4
5
> console.log('Hello World!');
Hello World!
> undefined

安装模块

全局模式

1
$ npm install –g <package name>

本地模式

1
$ npm install <package name>

卸载模块

全局模式

1
$ npm uninstall -g <package name>

本地模式

1
$ npm uninstall <package name>

更新模块

全局模式

1
$ npm update -g <package name>

本地模式

1
$ npm update <package name>

使用package.json文件定义依赖关系

package.json是一个JSON格式的文件，包含了一系列属性，但是如果仅仅是为了说明程序的依赖关系，则只用一个dependencies属性就行。比如，一个叫MyApp的应用程序依赖sax,nano和request模块，只需要建立这样一个package.json：

1
$ npm init

安装依赖

1
$ npm install

更新依赖

1
$ npm update
tools

built a personal blog with hexo

demo

Welcome to Hexo!
This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

install nodejs

download nodejs from here to enable nodejs package manager

install hexo

1
npm install -g hexo

Create a new blog

1
$ hexo init myBlog

More info: Writing

Create a new post

1
$ hexo new "My-New-Post"

More info: Writing

Generate static files from markdown files

1
$ hexo generate

More info: Generating

Run server

1
$ hexo server

More info: Server

view the effect

you can see the pages on

http://localhost:4000

register on github

you should have a account on github before you go to the next step

https://github.com/

Create a repository

you had to create a repository named ‘your_account.github.io’
more info: repository

install the git

you can download git from here and install it globally .
the path should be added into the path environment variable

1
2
$ git --version
git version 2.7.2.windows.1

install hexo-depoyer-git

1
npm install hexo-deployer-git --save

configure

edit _config.yml file on hexo root directory

1
2
3
4
deploy:
 type: github
 repository: https://github.com/xiaomiya/xiaomiya.github.com.git
 branch: master

Deploy to github

1
$ hexo deploy

More info: Deployment

backup

1
npm install hexo-git-backup
1
2
3
4
5
6
7
# backup
## docs: https://github.com/coneycode/hexo-git-backup
backup:
    type: git
    repository:
       github: https://github.com/xxx/hexo-blog-xxx.git,master
	   gitcafe: https://github.com/xxx/hexo-blog-xxx.git,master
1
hexo backup

More info: backup

the end

it is time to have a deep breath ! a personal blog is ready on github !
you can view hexo.io to more informations , plugins and awsome themes …

example
demo

tools
,