详解用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 相关文章推荐
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
Angular 4.x 动态创建表单实例
Apr 25 Javascript
JS实现简单抖动效果
Jun 01 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 Javascript
js实现自动锁屏功能
Jun 02 Javascript
详解微信小程序框架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获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
php编写简单的文章发布程序
2015/06/18 PHP
PHP最常用的正则表达式
2017/02/13 PHP
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
python模块之StringIO使用示例
2015/04/08 Python
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
Python几种常见算法汇总
2020/06/02 Python
python批量修改交换机密码的示例
2020/09/22 Python
python合并多个excel文件的示例
2020/09/23 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
优秀女职工事迹材料
2014/02/06 职场文书
高中生操行评语大全
2014/04/25 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
纪检监察建议书
2014/05/19 职场文书
员工生日会策划方案
2014/06/14 职场文书
会计专业自荐书
2014/07/08 职场文书
团队拓展活动总结
2014/08/27 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
具结保证书范本
2015/05/11 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
高温慰问简报
2015/07/21 职场文书
社会实践心得体会范文
2016/01/14 职场文书