如何在ReactNative中使用ES6新语法
进行再学习Redux，里面大量使用了ES6
但是我的一个React Native工程中使用ES6语法就会报错
// var React = require('react-native');
import React from 'react-native';
syntaxError:Unexpected use of reserved word 'import'
查了一些资料，貌似需要react+webpack+babel才可以使用ES6
但是不知道如何才能把这几个结合起来
=======================================
解决方法:
React工程需要webpack+babel
React-Native工程只需要在项目根目录放一个babel配置文件.babelrc即可
//.babelrc内容
{
"retainLines": true,
"compact": true,
"comments": false,
"whitelist": [
"es6.arrowFunctions",
"es6.blockScoping",
"es6.classes",
"es6.destructuring",
"es6.parameters",
"es6.properties.computed",
"es6.properties.shorthand",
"es6.spread",
"es6.modules",
"es6.templateLiterals",
"es7.trailingFunctionCommas",
"es7.objectRestSpread",
"es7.asyncFunctions",
"es7.classProperties",
"regenerator",
"flow",
"react",
"react.displayName"
],
"sourceMaps": false
}
=======================================
PS:
不过仍存在一些问题，不知道是为什么
// ok
var React = require('react-native');
var {
AppRegistry,
Component,
PropTypes
} = React;
// 无效
import React,{
AppRegistry,
Component,
PropTypes
} from 'react-native';
// ok
var {
Provider
} = require('react-redux/native');
//无效
import {
Provider
} from 'react-redux';
zaku4
9 years, 2 months ago
Answers
How to Write React in ES6 这是我在学习 Reflux 的时候总结的
simple-todo-with-react-and 这个 repo 是我分别用了 flux reflux 和 redux 实现的 todo, 里面都是用了 ES6 的语法，希望会有帮助 :)
哎哟啊van
answered 9 years, 2 months ago
第一、React.js 跟React-Native 是两个东西
React.js 是一个前端（从Facebook对其自身定义）View层框架
React-Native 是使用Js的写法写Android or IOS APP的一套框架。最终生成的是原生APP而非Web APP
第二、关于Webpack以及Babel
Webpack是一个依赖加载器，你可以理解为他Request.js
Babel是一个编译器，你可以理解为运行 javac 的工作，他的作用是将你写的ES6代码转换成ES5模式的代码（尽管ES6出了但浏览器并未或者无法普及。例如万恶的IE..）
第三、如何将他们组合起来（初次体验运行）
首先，要组合的将是React.js + Webpack + Babel
所有程序都有一个入口，从入口开始看
当然此时你应该最好要先懂一些node.js npm.js的基础
一般你从github clone回来的人家的代码会有一个package.json 的文件
这个是npm的声明包,这些包你都可以在npmjs.com的网站上查看
你如果不是很想去了解这一块，可以直接只看里面的Dependencies对象
这些将是你(cd)进入项目目录之后运行npm install 会要下载的依赖。
如果使用Webpack的话没记错是应该要将Webpack全局安装，即（
npm install webpack -g
）
接着
npm install
安装依赖
然后等待安装完成后先打开webpack.config.js文件
将devtool：“…………”一大串东西改为 devtool : false保存运行
webpack
（压缩的话输入
webpack -p
）
一般我看过大多Demo项目都是运行完生成（./build/bundle.js）这个文件
此时你可以新建一个html文件，在里面创建一个<div id="root"></div>将这个js文件引入
打开页面，即可看见项目效果
第四、读懂webpack.config.js配置
一般这个文件中下列3个模块是至关重要的，其他先忽略：
entry //要生成项目的入口
output //输出的文件配置
module //编译器的配置
可以重点关注一下下载回来的Demo项目的配置中这几项的做法
详情可以读读API，或者别人写的webpack的介绍帖
看下module，此时会看见里面有
test: /\.js$/,
loaders: ['babel']
这一块就是告诉webpack，等下读到我输入的文件中，只要读到js结尾的就用babel编译一下。
好，所以其实babel呢是不会真正引入到你实际运行的项目中的，他只用在编译过程
除非你项目中引入babel-code这个polyfill，这个是让一些不是很兼容ES5的浏览器运行这些代码的一个补充库，所以其实你可以理解他也是不关babel事的
接着看entry 地方，写了一个路径或多个路径
如果这里是数组，那么将是生成一个文件
如果是对象，且output中filename: '[name].js'这么写，那么输出的时候将会以你对象名去命名输出的文件
一般入口是APP.js 或者index.js 那么这就看自己项目怎么定义了。
接下来这就是你的项目入口了，看看入口分别import了什么模块，在哪个路径，引入的文件中有export了什么，细心点，多看几遍就都懂了
然后其实做到后面会碰到一些比如多页面非静态路由的时候，那么你可能会有优化性能，那么涉及到缓存一个common文件来达到这个目的，那么你会用到plugins
等等很多东西。
写到这里应该也回答完你上面的所有问题了。有可能有错漏的也望他人指出补充啦~
我也是刚刚拿这样一套模式开发了一个项目，觉得比从前ng啊什么的都好玩多了
我的这些也是从听见React.js 这个名词开始慢慢自己摸索出来的。希望对你有帮助吧
万花机关小猪
answered 9 years, 2 months ago
那是因为浏览器还不是很支持 ES6。 Redux的做法是通过webpack+babel打包成一个bundle.js文件。所有的js都在这里了。
官网有介绍怎么用，参考就行了。
https://babeljs.io/docs/setup/#webpack
其实Redux的例子已经很好了。 https://github.com/rackt/redux/blob/master/examples/todomvc/package.json
clone Redux git项目，然后
cd examples/todomvc
npm install
npm start
就可以跑啦~
MIO求舔足
answered 9 years, 2 months ago