详解用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 相关文章推荐
监控 url fragment变化的js代码
Apr 19 Javascript
JavaScript 设计模式 安全沙箱模式
Sep 24 Javascript
JS按位非(~)运算符与~~运算符的理解分析
Jul 31 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
jQuery选择器基础入门教程
May 10 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
JS document form表单元素操作完整示例
Jan 13 Javascript
详解Vue的列表渲染
Nov 20 Vue.js
详解微信小程序框架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
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
php中Smarty模板初体验
2011/08/08 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
python用户评论标签匹配的解决方法
2018/05/31 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
详解Python模块化编程与装饰器
2021/01/16 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
三维科技面试题
2013/07/27 面试题
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
法律意见书范文
2015/05/20 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript
JavaScript函数柯里化
2021/11/07 Javascript
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers