如何在ReactNative中使用ES6新语法

最近在学习Redux，其中的Example里面大量使用了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';

ecmascript-6 react react-native

阅读 12.7k

3 个回答

idler_z

✓ 已被采纳

第一、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 这个名词开始慢慢自己摸索出来的。希望对你有帮助吧