首页 > 其他 > 详细

001--前端面试之ES6的使用和模块化的构建

时间:2019-05-09 11:50:00      阅读:108      评论:0      收藏:0      [点我收藏+]

面试问题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的使用和模块化的构建

原文:https://www.cnblogs.com/ccbest/p/10837336.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!