javascript,node,npm,es6,typescript,define,commonjs,amd,import,require,module,export,exports到时有什么关系

每个人对知识的理解都不一样,深度也不一样,自己的理解能解决问题,理解就是对的,不管别人怎么看.

最近使用vue遇到好多头大的语法还是抽点时间把这些概念都理清一下吧

JavaScript是什么

JavaScript 是因特网上最流行的脚本语言,它存在于全世界所有 Web 浏览器中,能够增强用户与 Web 站点和 Web 应用程序之间的交互。 原始的javascript就是这样在浏览器中使用

<script src="jquery.js"></script>
  

JavaScript组成

一句话总结:JavaScript是采用ECMAScript的语法 实现浏览器的文档模型和对象模型接口

JavaScript历史

JavaScript诞生于1995年。起初它的主要目的是处理以前由服务器端负责的一些表单验证, 1997年 ECMAScript是JavaScript标准 即ISO/IEC-16262, ECMAScript是JavaScript的组成之一,

ECMAScript的版本 第1版实质上与Netscape的JavaScript1.1相同,只不过做了些小改动:支持Unicode标准,对象与平台无关, 然后2 ,3 ,4, 5于2009年12月3日正式发布,也就是es5

也就是说nodejs项目诞生的时候是es5

CommonJS是规范

Node 应用由模块组成,采用 CommonJS 模块规范。

每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见

CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性

module,require,exports是实现了CommonJs规范才有的

Node使用CommonJS模块规范,内置的require命令用于加载模块文件。

require命令的基本功能是,读入并执行一个JavaScript文件,然后返回该模块的exports对象。如果没有发现指定模块,会报错 环境变量NODE_PATH, Node执行一个脚本时,会先查看环境变量NODE_PATH。它是一组以冒号分隔的绝对路径。在其他位置找不到指定模块时,Node会去这些路径查找

AMD规范

CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。

AMD规范则是非同步加载模块,允许指定回调函数。由于Node.js主要用于服务器编程,模块文件一般都已经存在于本地硬盘,所以加载起来比较快,不用考虑非同步加载的方式,所以CommonJS规范比较适用。但是,如果是浏览器环境,要从服务器端加载模块,这时就必须采用非同步模式,因此浏览器端一般采用AMD规范

es6

nodejs支持es6语法吗?

做个测试test.js

let a =1;
//测试模板字符串
console.log(`aaa${a}aaa`);
let b=[1,2,3]
//测试数组结构
console.log(...b);

//测试最剑箭头函数
let f = arg => arg

console.log(f(123));

//测试对象简写
let o = {
    fc(){
        return f;
    }
}
console.log(o.fc()(456))

class student{
    constructor(name){
        this.name = name;
    }
    introduce(){
        console.log(`my name is ${this.name}`)
    }
}
//测试class
let s = new student("Yang");
s.introduce()

//测试Set
const saite = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => saite.add(x));

console.log(saite);
node -v
v6.10.1
node test.js
aaa1aaa
1 2 3
123
456
my name is Yang
Set { 2, 3, 5, 4 }

运行结果好像是支持es6的,查了下往上说Node.js 6.x 已经支持 93% 的ES6特性

试了下不支持import

测试nodejs 支持es6的多少语法

npm install -g es-checker
es-checker
ECMAScript 6 Feature Detection (v1.4.1)

Variables
  √ let and const
  √ TDZ error for too-early access of let or const declarations
  √ Redefinition of const declarations not allowed
  √ destructuring assignments/declarations for arrays and objects
  √ ... operator

Data Types
  √ For...of loop
  √ Map, Set, WeakMap, WeakSet
   Symbol
   Symbols cannot be implicitly coerced

Number
   Octal (e.g. 0o1 ) and binary (e.g. 0b10 ) literal forms
  √ Old octal literal invalid now (e.g. 01 )
  √ Static functions added to Math (e.g. Math.hypot(), Math.acosh(), Math.imul() )
   Static functions added to Number (Number.isNaN(), Number.isInteger() )

String
   Methods added to String.prototype (String.prototype.includes(), String.prototype.repeat() )
   Unicode code-point escape form in string literals (e.g. \u{20BB7} )
   Unicode code-point escape form in identifier names (e.g. var \u{20BB7} = 42; )
  √ Unicode code-point escape form in regular expressions (e.g. var regexp = /\u{20BB7}/u; )
  √ y flag for sticky regular expressions (e.g. /b/y )
  √ Template String Literals

Function
  √ arrow function
  √ default function parameter values
  √ destructuring for function parameters
  √ Inferences for function name property for anonymous functions
  × Tail-call optimization for function calls and recursion

Array
  × Methods added to Array.prototype ([].fill(), [].find(), [].findIndex(), [].entries(), [].keys(), [].values() )
   Static functions added to Array (Array.from(), Array.of() )
   TypedArrays like Uint8Array, ArrayBuffer, Int8Array(), Int32Array(), Float64Array()
   Some Array methods (e.g. Int8Array.prototype.slice(), Int8Array.prototype.join(), Int8Array.prototype.forEach() ) added to the TypedArray prototypes
   Some Array statics (e.g. Uint32Array.from(), Uint32Array.of() ) added to the TypedArray constructors

Object
   __proto__ in object literal definition sets [[Prototype]] link
  √ Static functions added to Object (Object.getOwnPropertySymbols(), Object.assign() )
   Object Literal Computed Property
   Object Literal Property Shorthands
   Proxies
   Reflect

Generator and Promise
  √ Generator function
  √ Promises

Class
  √ Class
  √ super allowed in object methods
  √ class ABC extends Array { .. }

Module
  × Module export command
  × Module import command


=========================================
Passes 38 feature Detections
Your runtime supports 90% of ECMAScript 6
=========================================

webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)

import img from './file.png'
import css from './css.css'
import Styles from 'style-loader!css-loader?modules!./styles.css';

es6语法中没有这个啊,但是如果是webpack打包的项目就会有这个 记住一点,这是webpack语法,需要webpack的loader处理编译,因为你的源代码不是直接给node或浏览器直接运行的,webpack从入口文件找到import from语句的时候 会根据配置的loader处理编译

loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。

本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图可以直接引用的模块

node build/build.js 一个node脚本(nodejs 语法)

build/webpack.prod.conf.js 一个webpack配置(nodejs 语法)

src/ 项目源代码代码(commonjs规范 + webpack语法)

学习链接