webpack的require和import 有什么区别啊？

Question

这两种写法，有什么区别吗？

main.js

写法一

var _ = require('lodash')

写法二

import _ from 'lodash'

一直没理解。

几个问题：
1、这两种方式定义的"_"，我在其它 js中都能直接使用吗？
2、在浏览器环境下，这个"_"可以在console中直接使用吗？

确实对js中的变量的生命期始终不理解。。。什么时候能够引用一个变量，什么时候又不能。确实很晕。

---

似乎搞明白了

看看lodash/index.js

module.exports = require('./lodash');

引用的lodash.js，再看看lodash.js，在文件的最后的最后：

  if (typeof define == 'function' && typeof define.amd == 'object' && define.amd) {
    // Define as an anonymous module so, through path mapping, it can be
    // referenced as the "underscore" module.
    define(function() {
      return _;
    });
  }
  // Check for `exports` after `define` in case a build optimizer adds an `exports` object.
  else if (freeModule) {
    // Export for Node.js.
    (freeModule.exports = _)._ = _;
    // Export for CommonJS support.
    freeExports._ = _;
  }
  else {
    // Export to the global object.
    root._ = _;

也就是说lodash.js在root对象中定义了一个属性_，在node环境下就是global，在浏览器环境下就是window。
因此在写js时候，可以直接使用_这个变量。

再回到我的问题。

import _ from 'lodash'

这个误导了我。我以为是我在main.js中定义了import _，在浏览器中才能直接使用的符号_。其实不是这样。
import xxx from 'lodash'中的这个xxx，只在当前js中才能使用。在局部的，非全局的。
全局的定义是在lodash.js中自己定义的。

不知道理解对不对，还请@leftstick指正。

---

##

Answer 1

首先无论require还是import，都不是webpack的发明，它们是已经存在于世的不同的模块化规范(目前都不能直接运行于浏览器)。

于是需要通过webpack在配合各种plugin、loader将其转义，使之可以运行在浏览器里。

关于require，最早应该见于nodejs开发，属于CommonJS规范的一部分，可以看Modules/1.1

关于import，是ES2015里的新模块化规范，可以看ES6 modules

再来回到你的问题

1. _就是个变量，当然能在js里使用，这个jquery里的$是一种东西，无非是命名怪了点，总归还是变量，不要怕

2. 如果你问的是require或者import用法，那目前仍然需要通过babel或者traceur之类的转义工具将之转义为ES5语法，才能在浏览器里运行。但对于lodash库本身，并不是非得利用webpack...之类的工具才能用，直接使用<script>标签放在html里，就可以使用_了。

Answer 2

node里的require是node的一个模块，不是一个标准

而import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法

Answer 3

ES6标准发布后，module成为标准，标准的使用是以export指令导出接口，以import引入模块，但是在我们一贯的node模块中，我们采用的是CommonJS规范，使用require引入模块，使用module.exports导出接口。

ES6发布的module并没有直接采用CommonJS，甚至连require都没有采用，也就是说require仍然只是node的一个私有的全局方法，module.exports也只是node私有的一个全局变量属性，跟标准半毛钱关系都没有。

Answer 4

webpack中使用的require是基于commonjs规范实现的一个模块，是为了在服务端支持js模块化而出现的
因此这里的require是node提供的一个全局函数
而import是ES6模块语法的一部分，既可以用于前端js模块，后续也会服务端的nodejs