北京快三预测号码推荐:详解用Webpack与Babel配置ES6开发环境

北京快三走势图 www.mxld9.cn  更新时间:2019年03月12日 09:43:17   作者:倔强的小石头   我要评论

这篇文章主要介绍了详解用Webpack与Babel配置ES6开发环境,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

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

相关文章

  • sogou地图API用法实例教程

    sogou地图API用法实例教程

    这篇文章主要介绍了C# sogou地图API用法,包括了各种常用属性的用法实例,需要的朋友可以参考下
    2014-09-09
  • JS中的hasOwnProperty()和isPrototypeOf()属性实例详解

    JS中的hasOwnProperty()和isPrototypeOf()属性实例详解

    hasOwnProperty()和isPrototypeOf()这两个属性都是Object.prototype所提供:Object.prototype.hasOwnProperty()和Object.prototype.isPropertyOf(),下面给大家介绍这两个属性的方法和使用,一起看下吧
    2016-08-08
  • 最简单纯JavaScript实现Tab标签页切换的方式(推荐)

    最简单纯JavaScript实现Tab标签页切换的方式(推荐)

    这篇文章主要介绍了最简单纯JavaScript实现Tab标签页切换的方式(推荐)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • 浅谈js-FCC算法Friendly Date Ranges(详解)

    浅谈js-FCC算法Friendly Date Ranges(详解)

    下面小编就为大家带来一篇浅谈js-FCC算法Friendly Date Ranges(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • Ajax验证用户名或昵称是否已被注册

    Ajax验证用户名或昵称是否已被注册

    本文主要介绍了Ajax验证用户名或昵称是否已被注册的实例方法。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • JavaScript之filter_动力节点Java学院整理

    JavaScript之filter_动力节点Java学院整理

    filter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素。下面通过实例代码给大家简答介绍下javascript中的filter,需要的的朋友参考下吧
    2017-06-06
  • 深入浅析Node环境和浏览器的区别

    深入浅析Node环境和浏览器的区别

    最近有朋友问我node环境和浏览器的区别这一问题,今天小编就抽空给大家介绍下Node环境和浏览器的区别,感兴趣的朋友一起看看吧
    2018-08-08
  • 最新评论

    常用在线小工具

  • 不限量套餐猫腻多 工信部出手后三大运营商齐整改 2019-03-22
  • 150秒!速览习主席青岛峰会精彩瞬间 2019-03-21
  • 只有黑社会才会拉帮结派, 2019-03-21
  • 喜过端午:纽约华侨华人包粽子诵《离骚》赛龙舟 2019-03-20
  • 工程与时间赛跑 质量与进度齐抓 2019-03-19
  • 长城新媒体集团基本情况简介 2019-03-18
  • 重资“血拼”当心酿成内伤 2019-03-18
  • “超级连接”助力博物馆新发展(1) 2019-03-17
  • 【理上网来·喜迎十九大】扶贫也创新!十八大以来年均减贫人数超1300万 获历史突破 2019-03-17
  • 王子文再登封面 黑白光影间酷女孩玩转高级时尚 2019-03-16
  • 不忘初心继续前进——七集政论专题片 2019-03-15
  • 推动形成全面开放新格局 开启新时代开放新征程 2019-03-15
  • 听听 海底的“动静” 2019-03-14
  • 黄嘉刚:《费墨车话》 2019-03-13
  • 畅想——未来的人民日报 2019-03-12
  • 851| 913| 413| 992| 324| 784| 677| 387| 795| 709|