javascript - import React from 'react',ES6写法-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI聊天问答 Agent智能体 AI文本写作 AI绘画作图 AI设计工具 AI视频创作 AI音频制作 AI办公学习 AI编程开发 AI提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - import React from 'react',ES6写法

天蓬老师 2017-04-11 11:50:24

[JavaScript讨论组]

587

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

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

天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

全部回复(8)

阿神2017-04-11 11:52:24 8楼

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

赞 +0

添加回复

黄舟2017-04-11 11:52:24 7楼

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

把你的文件写的src文件下

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

然后执行 babel src -d dest

赞 +0

添加回复

天蓬老师2017-04-11 11:52:24 6楼

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

赞 +0

添加回复

PHP中文网2017-04-11 11:52:24 5楼

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

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

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

赞 +0

添加回复

天蓬老师2017-04-11 11:52:24 4楼

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

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

赞 +0

添加回复

PHPz2017-04-11 11:52:24 3楼

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

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

赞 +0

添加回复