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

问题描述

问 题

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

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指正。

---

##

解决方案

首先无论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里，就可以使用_了。

这篇关于webpack的require和import 有什么区别啊？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！