数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

河北排列7直播:详解用Webpack与Babel配置ES6开发环境

来源:脚本之家  责任编辑:小易  

河北20选五开奖结果 www.vhmyd.cn 安装 Webpack

安装:

# 本地安装
$ npm install --save-dev webpack webpack-cli

# 全局安装
$ npm install -g webpack webpack-cli

在项目根目录下新建一个配置文件—— webpack.config.js 文件:

const path = require('path');

module.exports = {
 mode: 'none',
 entry: './src/index.js',
 output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist')
 }
}

在 src 目录下新建 a.js 文件:

export const isNull = val => val === null
export const unique = arr => [...new Set(arr)]

在 src 目录下新建 index.js 文件:

import { isNull, unique } from './a.js'
const arr = [1, 1, 2, 3]
console.log(unique(arr))
console.log(isNull(arr))

执行编译打包命令,完成后打开 bundle.js 文件发现 isNull 和 unique 两个函数没有被编译,和 webpack 官方说法一致:webpack 默认支持 ES6 ??橛锓?,要编译 ES6 代码依然需要 babel 编译器。

安装配置 Babel 编译器

使用 Babel 必须先安装 @babel/core 和 @babel/preset-env 两个???,其中 @babel/core 是 Babel 的核心存在,Babel 的核心 api 都在这个??槔锩?,比如:transform。而 @babel/preset-env 是一个智能预设,允许您使用最新的 JavaScript,而无需微观管理您的目标环境需要哪些语法转换(以及可选的浏览器polyfill)。因为这里使用的打包工具是 Webpack,所以还需要安装 babel-loader 插件。

安装:

$ npm install --save-dev @babel/core @babel/preset-env babel-loader

新建 .babelrc 文件:

{
 "presets": [
  "@babel/preset-env"
 ]
}

修改 webpack 配置文件(webpack.config.js):

const path = require('path');

module.exports = {
 mode: 'none',
 entry: './src/index.js',
 output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist')
 },
 module: {
  rules: [
   {
    test: /\.js$/,
     loader: 'babel-loader',
     exclude: /node_modules/
   }
  ]
 }
}

由于 babel 默认只转换 ES6 新语法,不转换新的 API,如:Set、Map、Promise等,所以需要安装 @babel/polyfill 转换新 API。安装 @babel/plugin-transform-runtime 优化代码,@babel/plugin-transform-runtime 是一个可以重复使用 Babel 注入的帮助程序代码来节省代码的插件。

安装 @babel/polyfill、@babel/plugin-transform-runtime 两个插件:

$ npm install --save-dev @babel/polyfill @babel/plugin-transform-runtime

修改 .babelrc 配置文件:

{
 "presets": [
  ["@babel/preset-env", {
   "useBuiltIns": "usage", // 在每个文件中使用polyfill时,为polyfill添加特定导入。利用捆绑器只加载一次相同的polyfill。
   "modules": false // 启用将ES6??橛锓ㄗ晃渌?槔嘈?,设置为false不会转换???。
  }]
 ],
 "plugins": [
  ["@babel/plugin-transform-runtime", {
   "helpers": false
  }]
 ]
}

最后,配置兼容的浏览器环境。在 .babelrc 配置文件中设置 targets 属性:

{
 "presets": [
  ["@babel/preset-env", {
   "useBuiltIns": "usage",
   "modules": false,
   "targets": {
    "browsers": "last 2 versions, not ie <= 9"
   }
  }]
 ],
 "plugins": [
  ["@babel/plugin-transform-runtime", {
   "helpers": false
  }]
 ]
}

执行命令编译代码,完成后检查 bundle.js 文件,是否成功转换新 API 。如果发现以下代码即说明转换成功:

// 23.2 Set Objects
module.exports = __webpack_require__(80)(SET, function (get) {
 return function Set() { return get(this, arguments.length > 0 ? arguments[0] : undefined); };
}, {
 // 23.2.3.1 Set.prototype.add(value)
 add: function add(value) {
  return strong.def(validate(this, SET), value = value === 0 ? 0 : value, value);
 }
}, strong);

其他关于 js 压缩和 Webpack 启用 tree shaking 功能的设置本文不在赘述。

配置文件详情概览

package.json 文件:

{
 "name": "demo",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
  "@babel/core": "^7.3.4",
  "@babel/plugin-transform-runtime": "^7.3.4",
  "@babel/polyfill": "^7.2.5",
  "@babel/preset-env": "^7.3.4",
  "babel-loader": "^8.0.5",
  "webpack": "^4.29.6",
  "webpack-cli": "^3.2.3"
 }
}

webpack.config.js 文件:

const path = require('path');

module.exports = {
 mode: 'none',
 entry: './src/index.js',
 output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist')
 },
 module: {
  rules: [
   {
    test: /\.js$/,
     loader: 'babel-loader',
     exclude: /node_modules/
   }
  ]
 }
}

.babelrc 文件:

{
 "presets": [
  ["@babel/preset-env", {
   "useBuiltIns": "usage",
   "modules": false,
   "targets": {
    "browsers": "last 2 versions, not ie <= 9"
   }
  }]
 ],
 "plugins": [
  ["@babel/plugin-transform-runtime", {
   "helpers": false
  }]
 ]
}

符录

usuallyjs 项目是本人最近建设的开源项目,欢迎感兴趣的同行交流。

usuallyjs: https://github.com/JofunLiang/usuallyjs

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:


  • 本文相关:
  • webpack4 使用babel处理es6语法的方法示例
  • webpack4与babel配合使es6代码可运行于低版本浏览器的方法
  • webpack使用 babel-loader 转换 es6代码示例
  • 详解webpack 配合babel 将es6转成es5 超简单实例
  • es6通过babel转码使用webpack使用import关键字
  • js判断元素是否在数组内的实现代码
  • webpack学习--webpack经典7分钟入门教程
  • 详解webpack??榛芾砗痛虬ぞ?/a>
  • sogou地图api用法实例教程
  • js中的hasownproperty()和isprototypeof()属性实例详解
  • 最简单纯javascript实现tab标签页切换的方式(推荐)
  • 浅谈js-fcc算法friendly date ranges(详解)
  • ajax验证用户名或昵称是否已被注册
  • javascript之filter_动力节点java学院整理
  • 深入浅析node环境和浏览器的区别
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 河北20选五开奖结果 - 频道导航
    Copyright © 2017 河北20选五开奖结果 www.vhmyd.cn All Rights Reserved
  • 一加手机5【报价 图片 参数 评测】 2019-03-25
  • 图解5G:开启万物互联  赋能数字经济 2019-03-25
  • (两会受权发布)第十三届全国人民代表大会八个专门委员会主任委员、副主任委员、委员名单 2019-03-25
  • 机场集团领导班子2017年度综合考核再获“好”等次 2019-03-24
  • 湿热天气毒蛇出没!蛇咋成了邪恶的化身? 2019-03-24
  • 【新时代 新作为 新篇章】陕西:“技术供给” 为“一带一路”建设注入科技力量 2019-03-24
  • 高清:探访苟坝见证历史 红军在此留下珍贵遗物 2019-03-23
  • 在深入推动长江经济带发展座谈会上的讲话 2019-03-23
  • 把环保责任镶嵌到组织管理架构中去 2019-03-22
  • 今年江西千万元公益金买服务 受益者将更广泛 2019-03-22
  • 您访问的页面找不回来了 2019-03-22
  • 特金明日将通电话 提醒谁莫忘感恩? (原创首发) 2019-03-21
  • 法制日报:别让世界杯激情冲淡守法意识 2019-03-21
  • [大笑]小撸的眼睛在滴血…… 2019-03-21
  • 浙江大学科研团队潜心十五载 飞机装配有了国产自动化设备 2019-03-21
  • 247| 822| 273| 259| 826| 396| 896| 502| 490| 711|