使用 Webpack 与 Babel 配置 ES6 开发环境

kelvinlee 发布于2019-08-26 13:35 / 3140人阅读

摘要：而是一个智能预设，允许您使用最新的，而无需微观管理您的目标环境需要哪些语法转换以及可选的浏览器。启用将模块语法转换为其他模块类型，设置为不会转换模块。最后，配置兼容的浏览器环境。

使用 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

GPU云服务器云服务器开发环境配置 php开发环境使用 cdn环境搭建与配置 python开发环境配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109112.html

webpack 项目构建：（二）ES6 编译环境搭建

摘要：本质就是一个编译器，通过将源代码解析成抽象语法树将源代码的结果一系列转换生成目标代码的将目标代码的转换成代码。项目构建三开发环境本地服务器搭建源码下载地址参考资料入门阮一峰中文文档中文网注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。在上一章 webpack 项目构建：（一）基本架构搭建我们搭建了一个最基本的 webpack 项目，现...

marser 2019-08-22 15:08 评论0 收藏0
ES6-开发环境搭建（1）

摘要：全局安装本地安装转码规则安装完成后，我们可以看一下我们的文件，已经多了选项。直接在线编译提供一个在线编译器，可以在线将代码转为代码。古语有云：君子生非异也，善假于物；工欲善其事，必先利其器。由于有些低版本的浏览器还是不支持ES6语法，学习ES6，首先要学会搭建一个基本的ES6开发环境，利用工具，把ES6的语法转变成ES5的语法。 1、使用Babel把ES6编译成ES5 1...

android_c 2019-08-23 15:21 评论0 收藏0
webpack多页应用架构系列（八）：教练我要写ES6！webpack怎么整合Babel？

摘要：本文首发于的技术博客实用至上，非经作者同意，请勿转载。只是最近学习生态，用起来转换之余，也不免碰到诸多用上的教程案例，因此便稍作学习。在当前的浏览器市场下，想在生产环境用上，是必不可少的。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000006992218如果您对本系列文章感兴...

gnehc 2019-08-20 11:14 评论0 收藏0
webpack 大法好 ---- 基础概念与配置（1）

摘要：不信你命令行里敲个试试敲敲敲当然了想直接运行命令，你需要将添加到系统变量啊。全局安装相同的，运行命令耐心等待安装完成后，你的系统变量里就存在命令了，你可以运行下试试。上诉如果有不懂的，欢迎留言。再一次见面！ Light 还是太太太懒了，距离上一篇没啥营养的文章已经过去好多天。今天为大家介绍介绍 webpack 最基本的概念，以及简单的配置，让你能快速得搭建一个可用的 webpack ...

QLQ 2019-08-20 14:41 评论0 收藏0
Webpack系列——手把手教你使用Webpack搭建简易的React开发环境

摘要：在这篇文章中我们开始利用我们之前所学搭建一个简易的开发环境，用以巩固我们之前学习的知识。文章首发于我的github及个人博客，github请看https://github.com/huruji/blo...，转载请注明出处。在这篇文章中我们开始利用我们之前所学搭建一个简易的React开发环境，用以巩固我们之前学习的Webpack知识。首先我们需要明确这次开发环境需要达到的效果：1、...

cucumber 2019-08-22 11:06 评论0 收藏0