React import 和require导入方式

1.manifest.json 指定了开始页面 index.html，一切的开始都从这里开始，所以这个是代码执行的源头。

2.为什么每个组件的 js 文件头部都要引入 import React from 'react' 

因为每一个文件都是一个单独的模块，不引入的话不能识别文件中的React是什么，但是你可以在webpack中讲React配置为全局变量。

plugins:[
    //自动加载模块，而不必到处 import 或 require 。
    new webpack.ProvidePlugin({
      React: "React"
    })
  ]

代码中没有使用过React，必须要引用，而且必须为大写。

import React, { Component } from 'react';

class Process extends Component {

  render() {
    return (<div>哈哈哈</div>)
  }
  
}

 

上述代码被babel转译后：

import React, { Component } from 'react';

class Process extends Component {

  render() {
    return React.createElement(
      'div',
      null,
      '\u54C8\u54C8\u54C8'
    );
  }
}

用到了React.createElement

约定使用React，故必须引用。

3.react组件两种导入方式

React组件可以通过两种方式导入另一个组件

1. import(常用)

import component from './component'

1. require

const component = require('./component')

4.

CommonJS就是为JS的表现来制定规范，因为js没有模块的功能所以CommonJS应运而生，它希望js可以在任何地方运行，不只是浏览器中。

 Node，CommonJS，浏览器甚至是W3C之间有什么关系： CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)} 

require()用来引入外部模块；exports对象用于导出当前模块的方法或变量，唯一的导出口；module对象就代表模块本身。

5. 虽说Node遵循CommonJS的规范，但是相比也是做了一些取舍，填了一些新东西的。

不过，说了CommonJS也说了Node，那么我觉得也得先了解下NPM了。NPM作为Node的包管理器，不是为了帮助Node解决依赖包的安装问题嘛，那它肯定也要遵循CommonJS规范啦，它遵循包规范（还是理论）的。

6. AMD

 CommonJS是主要为了JS在后端的表现制定的，他是不适合前端的，为什么这么说呢？ 这需要分析一下浏览器端的js和服务器端js都主要做了哪些事，有什么不同了：
于是乎，AMD(异步模块定义)出现了，它就主要为前端JS的表现制定规范。 AMD就只有一个接口：define(id?,dependencies?,factory); 它要在声明模块的时候制定所有的依赖(dep)，并且还要当做形参传到factory中，像这样：    define(['dep1','dep2'],function(dep1,dep2){...}); 
 define(function(){     var exports = {};     exports.method = function(){...};     return exports; });  咦，这里有define，把东西包装起来啦，那Node实现中怎么没看到有define关键字呢，它也要把东西包装起来呀，其实吧，只是Node隐式包装了而已..... 

RequireJS就是实现了AMD规范的呢。

7.

eact组件两种导入方式

React组件可以通过两种方式导入另一个组件

1. import(常用)

import component from './component'

1. require

const component = require('./component')

两种方式有什么区别?

• 提出的规范不同
  import是ES6语法,reuqire是CommonJs提出的.

• import会通过babel转换成CommonJS规范。
  下面两行代码是等价的

import component from './component'
// => 
const component = require('./component')

推荐统一规范一种导入方式,防止混乱
当然,不同情况使用的方式也是不一样的.
下面详细介绍两种导入方式对应的情况(注意这里不介绍按需加载,可看《前端性能优化之按需加载》)

8.

两种方式对应的 情况

1. import xxx from 'xxx'
   一般来说使用import就够了.但是要注意import需要放在定义组件的外部。这就导致一个问题:

如果我需要通过动态路径动态加载组件(这里并非指按需加载),在class里面(ES6)语法使用import会报下面错误:

Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level

这时候使用require方法能很好解决

1. var xxx = require('xxx')
   这里需要注意的是:
   用import引入的组件只需要export default即可
   而通过require引入的组件需要底部生命module.exports = component