react编译
‘壹’ webpack怎么自动编译reactjs
使用webpack编译打包react是非常便捷的。这也是人们常用的一种方式。但是在使用过程中，一定要注意一个细节，那就是webpack和babel-loader的安装位置。
react安装
当然，使用react必须先安装react和react-dom，其安装方式很简单（前提是我们必须安装有npm）。
# npm install react react-dom –save
react安装就这样简单，其实react和react-dom就是相当于js类库。但是我们需要解析器来解析react的语法。
react解析器babel安装
babel安装的位置是我们这篇文章的目的。babel有两种安装的位置：一种是全局安装，一种是本地安装——也就是安装在项目目录下的node_moles下。
# npm install babel-core babel-loader babel-preset-react –save-dev
//本地安装
#npm install babel-core babel-loader babel-preset-react –g
//全局安装
一般情况下我们选择本地安装，这样便于管理。
打包工具webpack的安装
同样，webpack的安装位置也是这篇文章描述的所要注意的点。当然，它也有两种安装的位置：全局安装和本地安装。
# npm install webpack –save-dev
//本地安装
# npm install webpack –g
//全局安装
如果选择本地安装，那么在使用的时候较麻烦一些，我们需要在命令前加上路径。所以一般情况下都是全局安装，这样就可以在任意位置直接使用。
这里我们选择全局安装。这样才能出现我们将要说的问题。
webpack配置文件编写
安装完webpack以后，下面来编写webpack配置文件webpack.config.js。这里我不写全部，只写加载loader部分。
代码一
mole:{
loaders: [
{
test: /\.js$/,
loader: 'babel',
query:{
presets:['react']
}
}
]
}
编译过程中出现的错误
好了，到了关键的地方了。现在我们整个系统的配置是这样的：babel安装到本地，webpack安装到全局位置，webpack配置文件如代码一所示。
接下来我们就要编译打包我们的项目。
# webpack
执行该命令以后，你会发现出现如下的错误：
ERROR in (webpack)/~/node-libs-browser/~/process/browser.js
Mole build failed: Error: Couldn't find preset "react" relative to
directory
"/node/lib/node_moles/webpack/node_moles/node-libs-browser/node_moles/process"
……
这也就是说找不到babel-preset-react。
好了，说了这么多终于在这里引出了我们将要讨论的问题（这里大家不要嫌我啰嗦，为什么出现这种问题，其原因总要弄清楚。什么样的配置会出现这种问题，了解以后才容易上手解决）。
解决问题的方式
出现上述问题以后，我们有这样三种方式可以解决。
方式一
要解决这个问题很简单。我们知道，出现这个问题是因为bable和webpack安装的位置不同，所以找不到babel-preset-react。因为在配置文件中有这样一段代码。
query:{
presets:['react']
}
好了，既然知道是安装位置不同，那我们可以将babel安装在全局位置，这样这个问题不就解决了吗。
#npm remove babel-core babel-loader babel-preset-react –save-dev
//首先移除原先安装的babel
#npm install babel-core babel-loader babel-preset-react –g
//全局安装
没错，问题解决了。但是我们不推荐使用这种方式。因为这样不便于管理，所以还是使用其他的方式。
方式二
此种方式和方式一大同小异。方式一是改变babel的安装位置，而这里是改变webpack的安装位置。原先webpack是安装到全局位置的，所以找不到安装到本地项目目录下的babel-preset-react。因此我们可以改变webpack的位置。
# npm remove webpack –g
//移除原先的webpack
# npm install webpack –save-dev
//将webpack安装到本地位置——也就是项目目录下的node_moles中
# ln –s /项目根目录/node_moles/webpack/bin/webpack.js /usr/bin/webpack
//为了使用webpack方便，在这里我们在/usr/bin目录下建立软连接（也就是快捷方式）
//这样我们就可以在任意位置直接使用webpack命令了。
此时我们已经改变了webpack的安装位置。现在二者同在项目目录下安装。所以可以正确编译了。
此种方式较方式一，我个人比较推荐这种方式，这样比较方便管理。但是，这种方式也不是没有弊端。如果我们有多个项目，那我们就需要在每个项目下都安装webpack，那岂不是很麻烦。所以这种方式也不是很好。
方式三
该方式应该说是最值得推荐的，因为不需要改变webpack和babel的安装位置。webpack还是在全局位置，babel还是在本地项目位置下。我们需要做的就是修改webpack的配置文件，在代码一的基础上添加一句代码。
代码二
mole:{
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude:/node_moles/,
query:{
presets:['react']
}
}
]
}
‘贰’ react native 每次编译都需要重启么
本着什么都要搀和的原则，一起来看看React Native是如何开发iOS APP。
围观本文需自备Mac OSX ， XCode ， node 以及 npm 。
做好准备之后，打开你的终端（或其他命令行利器），键入下面命令：
npm install -g react-native-cli
和
react-native init AwesomeProject
此时，我们会看到一个名为AwesomeProject的文件夹，这就是工程文件的位置。使用XCode打开AwesomeProject.xcodeproj，并点击RUN，会看到iOS模拟器以及此项目对应的内容，效果如下：
如果想要修改显示内容，请打开index.ios.js，里面是一堆Javascript模样的东西。修改之后，在iOS模拟器中cmd+R就可以看到修改后的效果。
接下来，我们按照教程，来展示一张电影海报，为了方便，我们直接修改index.ios.js。
一、模拟数据
‘叁’ react+webpack的热编译问题
devServer没有配 loaders里的react-hot也没配 看下官方文档去吧
‘肆’ 如何使用 ES6 编写一个 React 模块，并且编译后发布到 NPM
前言
如果你在使用 React， 那么肯定已经撸了好多自己的组件， 并尝试着共享出来。在 OneAPM 前端开发过程中， 我们也曾遇到了一些组件共享的问题：
例如:
是通过 git 直接发布还是通过 NPM 发布 ？
发布的是 ES5 的代码还是 ES6 的代码 ？
如何解决 Babel5 和 Babel6 的冲突 ？
这篇文章会通过编写一个叫做 MyComponet 的例子来演示发布一个模块需要注意的地方, 并不涉及单元测试和代码规范等。
前端开发果真是发展迅猛，刚享受到由模块化，组件化和单元测试带来的种种好处，又得迅速拥抱 Grunt, Gulp, Browserify， Webpack 这类自动化工具的变革。除了工具和生态圈，JavaScript 本身也在飞速发展着。ES2015(ES6) ，ES2016(ES7) ... 照这样的节奏，几乎是一年一个标准。标准多了，为解决兼容性的问题，竟也派生出了 源代码 和 编译 的概念。前端开发者通过语法糖、转化器、Polyfill 等，可以享受到标准乃至尚未定稿草案里的规范的便利，大幅提升开发效率。
至于这个模块本身,它的功能特别简单, 就是显示模块自身的的属性。
源代码
我们来编写组件 MyComponent.jsx ，放到项目的 src 目录下。
import React from 'react';
const MyComponent = props=> {
return <div>
props:
<pre>{JSON.stringify(props, null, 2)}</pre>
</div>
}
export default MyComponent;
关于各种文件放在哪里, 这里是我推荐的一些约定:
src 下用于存放源代码
lib 是编译后的代码，这个目录只读
所有包含 ES6 语法的文件名统一后缀为 .es6
所有包含 JSX 语法的文件后统一缀名为 .jsx
假设源代码里还有另外两个文件 foo.es6 和 bar.js，简化起见都丢到 src 的根目录下。
编译
为了把 ES6 代码编译成 ES5，需要安装 Babel，这个工具可以说野心极大，一次编译可以让 JavaScript 运行在所有地方。（听起来是不是有点 Java 的作风）
目前最常用的是 Babel5 版本，但是 Babel6 版本的设计更为精巧，已经非常推荐更新。也正是由于 Babel 有两个版本，所以开发过程中很有可能遇到这样的情况，
模块 A 的开发依赖于 Babel5 版本，而模块 B 依赖于 Babel6 版本。
解决这个问题最好的做法就是把 A 和 B 拆开，独立开发和发布。并且在发布到 NPM 的时候发布是的编译后的，也就是 ES5 版本的代码。
所以如果你的机器上的 babel 是全局安装的，是时候卸载它了，因为它的版本不是 5 就是 6 ，会导致一些不可预见的问题。
npm uninstall babel-cli --global
正确的安装方式是把 babel-cli 作为 develeopment 的依赖
npm install babel-cli --save-dev
使用的时候并不是直接调用全局的 Babel 而是调用依赖里的 Babel 可执行文件
./node_moles/.bin/babel
如果按照前文的约定来组织代码，src 目录结构看起来是这样的
src
├── bar.js
├── foo.es6
└── MyComponent.jsx
模块所有的代码都在一个目录下，这样编译过程就简单多了，两条命令就可以完成
./node_moles/.bin/rimraf lib
./node_moles/.bin/babel src ---files --source-maps --extensions .es6,.es,.jsx --out-dir lib
输出目录的结构
lib
├── bar.js
├── foo.js
├── foo.js.map
├── MyComponent.js
└── MyComponent.js.map
具体解释一下各个命令的作用：
第一条命令 ./node_moles/.bin/rimraf lib
作用 编译前清空之前的 lib 目录，这是一个好习惯，可以杜绝对 lib 下的文件的任何手动更改。
第二条命令
./node_moles/.bin/babel src --out-dir lib --source-maps --extensions .es6,.es,.jsx ---files
作用 遍历 src 目录下的文件，如果后缀名是 .es/.es6/.jsx 中的一种，就编译成 ES5，否则就直接拷贝到输出目录 lib 下
参数详解:
--out-dir lib 指定输出目录为 lib
--extensions .es6,.es,.jsx 指定需要编译的文件类型
---files 对于不需要编译的文件直接拷贝
--source-maps 生成 souce-map 文件
编译过程中还隐含了一个步骤就是加载 .babelrc 文件里的配置，该文件内容如下
{
"presets": [
"es2015",
"stage-0",
"react"
]
}
这是因为 Babel6 采用了插件化的设计，做到了灵活配置：如果要转换 JSX 语法文件，就加上 react 的 preset，同时项目依赖里要添加
babel-preset-react
npm install babel-preset-react --save-dev
样例代码
开发和调试 React 模块目前最好用的打包工具还是 Webpack，在项目跟目录下，新建一个 example 目录：
example/index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body></body>
<script src="bundle.js"></script>
</html>
example/src/index.jsx
import React from 'react';
import MyComponent,{foo,bar} from '../../';
import {render} from 'react-dom';
var element = document.createElement("div");
document.body.appendChild(element);
render(<MyComponent name="myComponent"/>, element);
webpack.config.js
var path = require('path');
mole.exports = {
entry: path.join(__dirname, 'example', 'src', 'index.jsx'),
output: {
filename: 'bundle.js'
},
mole: {
loaders: [{
test: /\.jsx$/,
loader: 'babel',
include: [
path.join(__dirname, 'example')
]
}]
},
devServer: {
contentBase: path.join(__dirname, 'example')
}
}
运行样例代码
./node_moles/.bin/webpack-dev-server
发布
发布前，还有一件事就是为你的模块添加一个入口文件 index.js
mole.exports = require('./lib/MyComponent');
exports.default = require('./lib/MyComponent');
exports.bar = require('./lib/bar');
exports.foo = require('./lib/foo');
接下来就是发布到 NPM 了。
npm publish
使用
别的开发者在使用你新发布的模块的时候可以这样导入
import MyComponent,{foo,bat} from 'react-component-example'
导入的直接是 ES5 代码，跳过编译从而避免了出现 Babel 版本不一致的问题，并且速度更快，是不是很棒！
不过假设你的模块包含很多组件，开发者可能只想用其中的一个或某几个，这时可以这样导入：
import MyComponent from 'react-component-example/src/MyComponent.jsx'
导入的是 ES6 代码，并且会被加入父级项目的编译过程。
‘伍’ 有人知道reactos 0.3.3怎么编译吗
好像没有这个软件
‘陆’ 你们react 项目编译环境是完全在自己配置还是用
webpack只会生成一个叫做bundle.js的文件，所有的资源文件都被打包到了这个文件上，运行网站也不是直接运行html的，要用npm来运行
‘柒’ 如何使用react-tools将jsx编译成JavaScript
1,通过npm安装react-tools
npm –g react-tools
2,通过cmd进入项目根目录执行watch命令 jsx --watch src/ build/
src路径下存放的是jsx文件，编译后的js存放到build路径下
3,当目标文件变化以后，自动构建生成新的js文件。
‘捌’ 如何编译ReactNative示例程序Examples
本着什么都要搀和的原则，一起来看看React Native是如何开发iOS APP。
围观本文需自备Mac OSX ， XCode ， node 以及 npm 。
做好准备之后，打开你的终端（或其他命令行利器），键入下面命令：
npm install -g react-native-cli
和
react-native init AwesomeProject
此时，我们会看到一个名为AwesomeProject的文件夹，这就是工程文件的位置。使用XCode打开AwesomeProject.xcodeproj，并点击RUN，会看到iOS模拟器以及此项目对应的内容，效果如下：
如果想要修改显示内容，请打开index.ios.js，里面是一堆Javascript模样的东西。修改之后，在iOS模拟器中cmd+R就可以看到修改后的效果。
接下来，我们按照教程，来展示一张电影海报，为了方便，我们直接修改index.ios.js。