Look import and require distinguished by ES6 Module

Foreword

When it comes to import and require, we usually see a lot of development in some, particularly the need for front-end engineering of the project now have been inseparable from the node, the node environment in which both abound, generally speaking they are in order to achieve modular JS code, why do the two schemes, what difference does it occur?

Modular different solutions

Tracing the source, JS scripting language designed from the beginning this is not modular, so early global variables likely to cause naming conflicts. But with the growing web project, JS code amount is also increasing, so the community spontaneously agreed to several modular solutions: requirejs follow AMD, seajs follow CMD, node of module follow CommonJS specification, although the wording has been on different, is to indirectly modular basis to maintain a relatively consistent code style.

With the release of the ES2015, the official standard defines a modular approach that import, export. However, the standard is the standard, after all, the major browsers and terminal node to achieve the standards still have some distance, now, all the major browsers in 2018 are not yet implemented, had to rely on conversion tools (for example babel) into ES5 after the browser to parse the code. So that explains why we engineered the code nodeJS follow the norms and ES6 CommonJS the modular approach the phenomenon of coexistence.

The difference between the two

import is ES6 standard modular solutions, require a node in CommonJS follow standard modular solution
The latter supports the introduction of dynamic, that is, require ($ {path} /xx.js), the former is not currently supported, but existing proposal
The former is the key word, the latter is not
The former is loaded compile-time, must be placed on top of the module, the performance will be better than some of the latter, which is a load operation, where theory can be put
The former uses a real-time binding way, that is, the value of import and export of all point to the same memory address, the import value with export value changes. The latter means that when you export a copy, even if the derived value changes, the value of import does not change, if you want to update the values necessary to re-import
The former will be compiled to require / exports performed

Difference in usage

import import modules

Import module according to the time of writing different writing module exports, specific reference herein , if the module is derived Normal:

// test.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};
// demo.js
import { firstName } from './test.js'
console.log(firstName);  // 'Michael'
import * as test from './test.js'
console.log(test);  //Module{}   所有内容
import { firstName as key, lastName as value } from './test.js'
console.log(key + '--' + value);  // Michael--Jackson

When with default values, but also our daily development in the usual way:

// test.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export default { firstName, lastName, year };
// demo.js
import test from './test.js'
console.log(test); // {firstName: "Michael", lastName: "Jackson", year: 1958}

The default is actually a syntactic sugar, but defaul is a keyword here is equivalent to

import { default as test } from './test.js'

Of particular note is the provisions of the export command is the external interface, it must establish one relationship with the internal module variables. Can be understood as a reference to export export of relationship rather than a specific value, their essence is the interface between the module name and internal variables, to establish a one to one relationship, for example, follows the error will be:

Export 1 ;
where m = 1 ;
export m;

But instead wrapped in braces has become a reference output relationship that becomes the object can be properly derived:

There are m = 1 ;
export { m }

require import module

require import module will not be so complicated, while exporting what, or what kind of time you import:

// test.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
module.exports = { firstName, lastName, year };
// demo.js
const test = require('./test.js');
console.log(test); // {firstName: "Michael", lastName: "Jackson", year: 1958}

There is also a less common usage, direct export:

// test.js
var year = 1958;
exports.year = year;
// demo.js
const test = require('./test.js');
console.log(test);  // {year: 1958}

Note that, after module.exports export module behind code derived invalid, for example, in the example

// test.js
module.exports = { firstName, lastName, year };
exports.name = '222';
// demo.js
const test = require('./test.js');
console.log(test);  // {firstName: "Michael", lastName: "Jackson", year: 1958}

Special instructions can be introduced due require anywhere, so we are developing picture by way of introduction - in fact equivalent to require:

<img src="~assets/img/icon/red_logo.png" class="logo" alt="">
//等效于
<img :src="require('assets/img/icon/red_logo.png')" class="logo" alt="">

to sum up

import and require that two different JS modular implementation of it, since before many packages are npm ecological basis CommonJS specification writing, so a considerable period of time is necessarily coexist import both modules and require introduction.

Overall, life is always developing, ES6 as a language specification is sooner or later will be supported by the major mainstream browser, otherwise it can not be called a mainstream browser. So for the longer term, we still try to use import ES6 to the introduction of modules, such as the browser supports the future we will be less change some code.

reference

Note 1:

JS报错：Cannot use import statement outside a module

When using the import and export of, type the type of error can not lead to a modular functions:

<script type="text/javascript">
　　import test from './test/js';
　　console.log(test);
</script>

You need to type in text / javascript instead Module , modular functions take effect:

<script type="module">
    import test from './test.js';
    console.log(test);
</script>

Note 2:

JS报错：require is not defined

The reason given:
the browser does not recognize require keywords, require that, in node_modules folder inside the modules require the following common environment in node.js

Solution:
By means browserify or webpack the compiler that js file, turn into the browser recognizes.

// install browserify, I have here a global installed

npm install -g browserify

// Compile

browserify ./source/module.js -o ./dist/dist.js

You can see dist.js file packaged under the dist directory.
The first parameter indicates the inlet behind the front end browserify program to be packaged, -o or> denotes an output file package. The browserify will require entry or file import (ES6, need to install Babel) automatically dependency analysis, and the package file as a single file dependent.
----------------
Disclaimer: This article is the original article CSDN bloggers "giao00000", and follow CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement. .
Original link: https: //blog.csdn.net/wml00000/article/details/84181227

Original Source:

Westerly thin code, ES6 study notes (b) - see the difference between import and require Module by ES6, https://www.cnblogs.com/wancheng7/p/10169470.html