口试深切一、ES6模块化、装置和打包

2023年3月27日 101次阅读 来源: kinshan

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
  • 扩大：说一下本身对模块化一致的期待
    原文作者：kinshan
    原文地址: https://segmentfault.com/a/1190000017214557
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞