面试深入一、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

1、电脑有node环境,运行npm init
 
 2、npm install --save-dev babel-core babel-present-es2015 babel-present-latest
 
 3、创建`.babelrc`文件
 
 4、npm install --global babel-cli
 
 5、babel --version
 
 6、创建 ./src/index.js
 
 7、内容:[1,2,3].map(item => item +1)

开发环境-webpack

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

2、配置 webpack.config.js

3、配置package.json中的script

4、运行npm start

rollup介绍(vue、react都是通过rollup打包的)

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

1、npm init

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

3、配置 .babelrc

4、 rollup.config.js

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

关于JS众多模块化标准

  • 没有模块化
  • AMD成为标准,require.js(也有CMD)
  • 前端打包工具,是的node.js模块化可以被使用
  • ES6出现,想统一现在所有模块化标准
  • node.js积极支持,浏览器尚未统一

问题解答

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

相关推荐