问题一:import React from 'react'这个写法是怎么回事?

答案:require是common.js的写法,
import是ES6的写法,
主要功能都是引入模块,
写法上:

var modal = require('...')
import modal from '....'

node环境下本身就有require内置对象;

webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require.ensure,以及webpack自己定义的require.include,再加上ES6的import语法;


2.ES6中的import和export

ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。同时还有CMD规范,为同步加载方案如seaJS。

ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。

ES6模块主要有两个功能:export和import

export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口

import用于在一个模块中加载另一个含有export接口的模块。

也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。如下图(假设a和b文件在同一目录下)

// a.js
var sex="boy";
var echo=function(value){
  console.log(value)
}
export {sex,echo}
//通过向大括号中添加sex,echo变量并且export输出,就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到
//不能写成export sex这样的方式,如果这样就相当于export "boy",外部文件就获取不到该文件的内部变量sex的值,因为没有对外输出变量接口,只是输出的字符串。
// b.js
通过import获取a.js文件的内部变量,{}括号内的变量来自于a.js文件export出的变量标识符。
import {sex,echo} from "./a.js"
console.log(sex) // boy
echo(sex) // boy

a.js文件也可以按如下export语法写,但不如上边直观,不太推荐。

// a.js
export var sex="boy";
export var echo=function(value){
  console.log(value)
} //因为function echo(){}等价于 var echo=function(){}所以也可以写成
export function echo(value){
   console.log(value)
}

以上是export与module的基本用法,再进行拓展学习

前面的例子可以看出,b.js使用import命令的时候,用户需要知道a.js所暴露出的变量标识符,否则无法加载。可以使用export default命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名。

//a.js
var sex="boy";
export default sex(sex不能加大括号)
//原本直接export sex外部是无法识别的,加上default就可以了.但是一个文件内最多只能有一个export default。
其实此处相当于为sex变量值"boy"起了一个系统默认的变量名default,自然default只能有一个值,所以一个文件内不能有多个export default。
// b.js
本质上,a.js文件的export default输出一个叫做default的变量,然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名,且不需要用大括号包含
import any from "./a.js"
import any12 from "./a.js"
console.log(any,any12) // boy,boy

 

问题一:
我是使用webpack打包的
为什么我的react模块放在node_modules中也只需要写成
import React from 'react';
就可以在另一个文件夹里引入react了?我并没有看到哪里设置了路径给react阿

问题2:我想问一下用webpack的时候使用import和export,是相当于使用ES6的呢?还是node里的内置对象呢?

答问一:你写了import React from 'react';,webpack会优先看看你有没有在resolve.alias里看看你有没有定义react,如果没有的话,就在node_modules里找。

答问二:这import和export都是ES6的语法,并不是什么内置对象,你看webpack1就不支持这import/export的语法,需要用babel转换成commonjs的写法require。

用react重构个人网站 3-22的更多相关文章

  1. 用react重构个人网站 3-23

    1:  :before 选择器在被选元素的内容前面插入内容 2:  float是什么?浮动在CSS中的作用 3:CSS运用在React中的两种方式 使用className属性,CSS内容就用link加 ...

  2. 基于React的PC网站前端架构分析

    代码地址如下:http://www.demodashi.com/demo/12252.html 本文适合对象 有过一定开发经验的初级前端工程师: 有过完整项目的开发经验,不论大小: 对node有所了解 ...

  3. React和动态网站接口的经济学

    来自: React and the economics of dynamic web interfaces 自从2000开始我就一直在做web开发,曾见过很多以各种库和框架的起起落落,这些库和框架作为 ...

  4. 单页面(如react,vue)网站的服务器渲染 SSR 之 SEO 大杀器 Rendertron

    单页面网站,比如vue.recat框架的网站,一般都是直接从服务器推送index.html,再根据自身路由通过js在客户端浏览器渲染出完整的html页面. 但是搜索引擎的爬虫可没有这么智能(实际上go ...

  5. react ui 参考网站

    react.semantic-ui.com react官方中文网址 https://zh-hans.reactjs.org/ es6标准入门 nodejs官网文档 nodejs.org https:/ ...

  6. 使用React重构百度新闻webapp前端

    http://wangfupeng.coding.me/share/2016/08/06/restruct-bdnews-webapp-by-react.html

  7. angularApi网站用vue重构

    最近在博客园上看到不少关于vue的文章但感觉都是在简单原生写法上,真正vue在实际开发中的优点组件化,spa应用,路由好像都没涉及到,我在学angular1的时候发现没有中文版的api,于是本人不才弄 ...

  8. 【腾讯Bugly干货分享】React移动web极致优化

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/579083d1c9da73584b02587d 最近一个季度,我们都在为手Q家校 ...

  9. 基于React Native的58 APP开发实践

    React Native在iOS界早就炒的火热了,随着2015年底Android端推出后,一套代码能运行于双平台上,真正拥有了Hybrid框架的所有优势.再加上Native的优秀性能,让越来越多的公司 ...

随机推荐

  1. Gathering Initial Troubleshooting Information for Analysis of ORA-4031 Errors on the Shared Pool

    In this Document   Purpose   Troubleshooting Steps   References APPLIES TO: Oracle Database - Enterp ...

  2. Android特效专辑(四)——APP主页框架TabHost绑定ViewPager的替换者TabLayout

    Android特效专辑(四)--APP主页框架TabHost绑定ViewPager的替换者TabLayout 现在很多app都在追求简单明了,功能又要强大,不过我还是喜欢之前的app风格,就是TabH ...

  3. 和菜鸟一起学linux总线驱动之i2c死锁问题

    不知不觉中已经有好几个月没有写点东西了,懒了就是懒了,说是忙着想把产品做得更好,都是借口,每天花一点时间来写点东西确实很不错,自己也坚持了很久很久,只不过今年以来,发现提高不是很大,能写的东西好少好少 ...

  4. Docker 基础技术之 Linux cgroups 详解

    PS:欢迎大家关注我的公众号:aCloudDeveloper,专注技术分享,努力打造干货分享平台,二维码在文末可以扫,谢谢大家. 推荐大家到公众号阅读,那里阅读体验更好,也沉淀了很多篇干货. 前面两篇 ...

  5. Objective-C 空指针和野指针

    一.什么是空指针和野指针 1.空指针 1> 没有存储任何内存地址的指针就称为空指针(NULL指针) 2> 空指针就是被赋值为0的指针,在没有被具体初始化之前,其值为0. 下面两个都是空指针 ...

  6. JS (全局作用域)

    一.全局函数作用域(把变量的声明和函数的声明放在前面) 作用域(scope):一条数据可以在哪个范围中使用. 通常来说,一段程序代码中所用到的数据并不总是有效/可用的,而限定这个数据的可用性的代码范围 ...

  7. Java多线程 阻塞队列和并发集合

    转载:大关的博客 Java多线程 阻塞队列和并发集合 本章主要探讨在多线程程序中与集合相关的内容.在多线程程序中,如果使用普通集合往往会造成数据错误,甚至造成程序崩溃.Java为多线程专门提供了特有的 ...

  8. LOVO学习之思维导图和文档编辑器

    思维导图——是一种图示笔记方法,一种图示笔记工具,一个思考的利器.能将放射性思考具体化,帮助人们理解和记忆事物. 思维导图绘制规则:1,在纸的正中央用一个彩色图像或者符号开始画思维导图. 2,把所有主 ...

  9. JQuery DOM操作 、属性和CSS样式操作、其他函数

    DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...

  10. apache压力测试工具的apache bench和JMeter的安装

    Apache压力测试工具的安装 1,apache bench的安装 apache  bench工具集成在http的软件包内,可以直接安装apache就可以. 当有些时候,我们不需要用到所有的软件包,我 ...