详解用Webpack与Babel配置ES6开发环境


Posted in Javascript onMarch 12, 2019

安装 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

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

Javascript 相关文章推荐
扩展String功能方法
Sep 22 Javascript
语义化 H1 标签
Jan 14 Javascript
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
基于jQuery的简单九宫格实现代码
Aug 09 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
js解决movebox移动问题
Mar 29 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
seajs学习教程之基础篇
Oct 20 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 #Javascript
javascript中数组的常用算法深入分析
Mar 12 #Javascript
详解javascript 变量提升(Hoisting)
Mar 12 #Javascript
NestJs 静态目录配置详解
Mar 12 #Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 #Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 #Javascript
记录一次完整的react hooks实践
Mar 11 #Javascript
You might like
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
JavaScript 模拟用户单击事件
2009/12/31 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
Python通过future处理并发问题
2017/10/17 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
tensorflow 查看梯度方式
2020/02/04 Python
为什么是 Python -m
2020/06/19 Python
通俗讲解python 装饰器
2020/09/07 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
Python的logging模块基本用法
2020/12/24 Python
Ajax的工作原理
2015/12/04 面试题
教师自荐信范文
2013/12/09 职场文书
主治医师岗位职责
2013/12/10 职场文书
供货协议书
2014/04/22 职场文书
检讨书模板
2015/01/29 职场文书
库房管理员岗位职责
2015/02/12 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
怎样写好工作计划
2019/04/10 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python