面試深刻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
• 擴展：說一下本身對模塊化統一的期待