001--前端面試之ES6的使用和模塊化的構建
阿新 • • 發佈:2019-05-09
format lob dev 文件路徑 .config 快速 轉化 config entry
面試問題ES6
ES6模塊化使用,開發環境如何打包?
1 export default { 2 //util.js 3 } 4 export funtion fn1() { 5 //util2.js 6 } 7 export function fn2() { 8 //util2.js 9 } 10 //引用的時候 11 import util1 from ‘./util1.js‘ 12 import {fn1,fn2} from ‘./util2.js‘ 13 //導入導出的引用
ES6支持瀏覽器babel的使用
1.安裝node
2.npm init 快速構建node項目 -y可以快速創建
3. npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest
4.創建.babelrc配置文件
配置方法如下:
{ "presets": ["es2015","latest"], "plugins": [] } //基本配置
5.安裝babel-cli npm install --global babel-cli 不建議全局安裝
可使用babel <文件路徑>進行轉化:
webpack的使用
1.安裝 npm install webpack babel-loader --save-dev
2.配置 webpack.config.js
3.配置 package.json 中的 scripts
4.運行 npm start
開發環境之rollup
npm init
npm i rollup rollup-plugin-node-resolve rollup-plugin-babel babel-plugin-external-helpers babel-preset-latest babel-core--save-dev
配置 .babelrc
{ "presets": [ ["latest", { "es2015": {"modules": false } }] ], "plugins": ["external-helpers", "babel-plugin-transform-regenerator"] }
配置 rollup.config.js
import babel from ‘rollup-plugin-babel‘ import resolve from ‘rollup-plugin-node-resolve‘ export default { entry: ‘src/index.js‘, format: ‘umd‘,//兼容性規範 plugins: [ resolve(), babel({ exclude: ‘node_modules/**‘ }) ], dest: ‘build/bundle.js‘ }
webpack和rollup的區別
rollup 功能單一,webpack 功能強大
參考設計原則和《Linux/Unix設計思想》
工具要盡量功能單一,可集成,可擴展
2019-05-09 11:13:49
001--前端面試之ES6的使用和模塊化的構建