面试深刻1、ES6模块化、安装和打包

ES6

• 开发环境已经普及使用
• 浏览器环境却支持很差（须要开发环境编译）
• 内容不少，重点了解经常使用语法
• 面试：开发环境的使用 + 重点语法的掌握

问题

• ES6模块化如何使用，开发环境如何打包
• Class和普通构造函数有何区别
• Promise的基本使用和原理
• 总结一下ES6其余经常使用功能

 

模块化的基本语法

//util1.js
export default {
    a: 100
}

//util2.js
export function fn1() {
    alert('fn1');
}
export function fn2() {
    alert('fn2');
}

//index.js
import util1 from './util1.js'
import { fn1, fn2 } from './util2.js'
console.log(util1);
fn1();
fn2();

开发环境-babel

一、电脑有node环境，运行npm init
 
 二、npm install --save-dev babel-core babel-present-es2015 babel-present-latest
 
 三、建立`.babelrc`文件
 
 四、npm install --global babel-cli
 
 五、babel --version
 
 六、建立 ./src/index.js
 
 七、内容：[1,2,3].map(item => item +1)

开发环境-webpack

一、npm install webpack babel-loader --save-dev
//--save -dev保存在开发环境中

二、配置 webpack.config.js

三、配置package.json中的script

四、运行npm start

rollup介绍（vue、react都是经过rollup打包的）

能优化冗余代码，体积更小

一、npm init

二、 npm i rollup rollup-plugin-node-resolve rollup-plugin-babel babel-plugin-external-helpers babel-preset-latest --save-dev

三、配置 .babelrc

四、 rollup.config.js

rollup功能单一，webpack功能强大，学习成本很高

关于JS众多模块化标准

• 没有模块化
• AMD成为标准，require.js（也有CMD）
• 前端打包工具，是的node.js模块化能够被使用
• ES6出现，想统一如今全部模块化标准
• node.js积极支持，浏览器还没有统一

问题解答

• 语法：import export (注意有无default)
• 环境：babel编译ES6语法，模块化可用webpack和rollup
• 扩展：说一下本身对模块化统一的期待