import React from 'react',ES6写法

Question

学react的时候看到import React from 'react';的写法，不太熟悉这样的写法，直接写会报错Uncaught ReferenceError: require is not defined，这要怎么办呢。

我好像查到点了什么，是要像scss那样编译成css一样把es6编译成es5再引用吗

Answer 1

使用babel将ECMAScript6的语法编译成ES5，这样一般的JS环境就能运行了

Answer 2

浏览器不认识require也不认识import，如果使用模块语法要确保代码经过打包。node环境的话使用的是commonjs，一般会用babel把import编译为require才能使用

Answer 3

建立两个文件夹
_ src
|_ dest

把你的文件写的src文件下

新建.babelrc
{
"preset":["react","es2015"]
}

然后执行 babel src -d dest

Answer 4

浏览器会报这个错是因为浏览器没有require对象，node不会报这样的错，是因为require是node的内置对象；

那么问题来了，如何在浏览器中，运行我们希望的require代码呢？

你可以依靠一些打包工具，比如webpack，将你依赖的模块打包好，这样就可以使用了

Answer 5

import是es6的语法，要编译成es5才能被浏览器解析
如果使用webpack的话在webpack.config.js里的module里加上

 module:{
    loaders:[  
      {test:  /\.js$/   , exclude:/node_modules/,loader: 'babel-loader',query:{presets:['es2015','react']} 
      }

Answer 6

其实楼主想问的是1浏览器和nodejs有什么关系 2import 和require又有什么区别
1 浏览器里的js的宿主环境只是一个页面，打印输出window这就是整个所能操作的对象
而nodejs是基于C++编写的脚本引擎，因此他的宿主环境是整个系统 相当是一个进程，可以调用操作系统的文件管理，网络端口....
2import 和require等等的语法 其实可以推荐楼主看篇文章 前端模块化之史

看完这些也就知道各种语法的大概了

Answer 7

默认情况下，Babel 会把 ES6 的导入语句编译成 CommonJS。所以，只要使用一个可以解析模块语法的打包工具（webpack 或者 browserify），你就可以玩转 node_modules/ 目录了，导入语句只需要包含模块的名称就可以了

Answer 8

这个是ES6语法，有些浏览器不能识别，用babel编译下就行了

Answer 9

这是es6语法，暂时浏览还不能支持直接使用。要用webpack打包，打包的同时会用第三方组件进行解析就ＯＫ了，一般是用的babel