npm 包 es2015-differential-serve-middleware 使用教程

简介

es2015-differential-serve-middleware 是一个用于快速搭建前端开发环境的 npm 包。它提供了通过 webpack 打包并使用 es6+ 语法的能力,在实现这些功能的同时不会抛弃旧版本的浏览器。

安装

你可以在你的项目目录下使用 npm 进行安装:

--- ------- ---------- ------------------------------------

使用

安装完成之后,你可以在你的项目中进行如下配置:

----- ------------------------ - ------------------------------------------------
----- ------- - -------------------
----- --- - ----------

----- ------ - -
    -- ----
    ----- ------
    -- ----
    ------ -----------
    -- ----
    ------- --------------
    -- ------
    ------- --------------
    -- --- --
    ----------- ----
    -- ---------
    --------- -
        -
            ----- ---------
            -------- ---
        --
        -
            ----- -------
            -------- --
        -
    -
-

------------------------------------------

-----------------

在启动服务之后,你可以访问 http://localhost:3000 即可, es2015-differential-serve-middleware 会自动根据你指定的浏览器版本将代码转换为 es5 语法,以支持旧版本的浏览器访问。

API

esDifferentialMiddleware(config)

  • config.root: 资源目录,默认值为 'src'
  • config.index: 入口文件,默认值为 'index.js'
  • config.output: 输出目录,默认值为 'dist/static'
  • config.static: 静态文件目录,默认值为 'dist/static'
  • config.publicPath: CDN 地址,默认值为 '/'
  • config.browsers: 使用的浏览器的版本列表

示例代码

----- ------------------------ - ------------------------------------------------
----- ------- - -------------------
----- --- - ----------

----- ------ - -
    ----- ------
    ------ -----------
    ------- --------------
    ------- --------------
    ----------- ----
    --------- -
        -
            ----- ---------
            -------- ---
        --
        -
            ----- -------
            -------- --
        -
    -
-

------------------------------------------

-----------------

总结

es2015-differential-serve-middleware 是一个非常好用的 npm 包,它提供了一种在支持 es6 语法的前提下还能支持旧版本浏览器的方案。通过学习本文,您可以了解到如何在您的项目中使用它,并打造更加完善的前端开发环境。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005589e81e8991b448d5e8b


猜你喜欢

  • 使用 Passport-GroupMe 进行多平台登录

    在前端开发中,我们常常需要处理用户登录的问题。Passport 是一个强大的 Node.js 模块,可以实现多平台的登录方式。在本文中,我们将介绍如何使用 Passport-GroupMe 模块实现通...

    2 年前
  • npm 包 vue-text-mask-2 使用教程

    什么是 vue-text-mask-2? vue-text-mask-2 是一个基于 Vue.js 的文本控件,用于控制用户输入的内容。它通常用来应对密码、电话号码、邮编等格式化要求,以提高用户输入的...

    2 年前
  • npm包angular-lib-dummy使用教程

    介绍 angular-lib-dummy是一个用于学习如何制作 Angular 库的示例。它具有基本的 Angular 库所需的结构和文件。您可以将其作为从头开始创建您自己的 Angular 库的基础...

    2 年前
  • npm 包 appium-proxy 使用教程

    前言 在移动端自动化测试中,Appium 是一个非常流行的工具,它支持不同的脚本语言,如 Python、Java、Ruby、JavaScript 等。Appium 使用 WebDriver 协议与设备...

    2 年前
  • npm 包 ionic-angular-mstaml 使用教程

    简介 ionic-angular-mstaml 是一款基于 Ionic 框架的移动端 UI 组件库,支持各种生动形态的元素组件、按钮、表单、模态框等。 本篇文章将对该 npm 包进行详细介绍,包括安装...

    2 年前
  • npm 包 oo-webpack 使用教程

    什么是 oo-webpack oo-webpack 是一个方便快捷地打包和构建前端应用的 npm 包。 它可以自动化处理 js、css、image 等静态资源,还可以支持热更新、压缩等功能。

    2 年前
  • npm 包 starwars-names-aadebdeb 使用教程

    前言 在前端开发的过程中,为了提高开发效率,我们常常会需要使用现成的 npm 包来简化我们的工作。本文将介绍一个非常有趣的 npm 包 starwars-names-aadebdeb,用于生成星球大战...

    2 年前
  • npm 包 vue-bootstrap-library 使用教程

    在前端开发中,我们经常需要使用各种工具和库来提升我们的开发效率和体验。其中,Vue.js 是一款非常优秀的 JavaScript 框架,而 Bootstrap 是一套优秀的前端 UI 框架。

    2 年前
  • NPM包dazz使用教程

    在前端开发过程中,为了提高开发效率和代码质量,我们会使用很多工具和库来简化开发流程。其中Node Package Manager(NPM)就是一个非常强大的工具,它允许我们非常方便地管理和使用各种依赖...

    2 年前
  • npm 包 redux-form-hotloaderfix 使用教程

    前言:redux-form 提供了一个方便清爽的操作表单的库,但是在使用过程中,我们常常遇到热更新(Hot Reload)的问题,即在修改代码后无法热更新表单。而 redux-form-hotload...

    2 年前
  • npm 包 electron-prebuilt-compile-jest 使用教程

    前言 electron-prebuilt-compile-jest 是一个 NPM 包,它能够让你通过 Jest 运行 Electron 测试。在这篇文章中,我们将会深入探讨这个包的使用方法,包括安装...

    2 年前
  • npm 包 travultr 使用教程

    简介 travultr 是一款基于 Node.js 和 Vultr API 的 npm 包,用于操作 Vultr 云服务器并进行常规的部署和管理操作。本篇文章将介绍 travultr 的安装方法、配置...

    2 年前
  • NPM 包 allex_jsonizingerrorlowlevellib 使用教程

    JavaScript 是一种非常强大的编程语言,它可以运行在浏览器端、Node.js 服务器端等多个平台。在前端开发中,我们通常会使用一些工具、框架和第三方库来协助我们完成开发任务。

    2 年前
  • npm 包 atscntrb-hx-teaching-mydraw 使用教程

    在前端开发中,我们经常会用到各种 npm 包来辅助我们的开发工作,在这里介绍一个非常实用的 npm 包:atscntrb-hx-teaching-mydraw,它是一个基于 HTML5 canvas ...

    2 年前
  • npm 包 @usco/stl-parser 使用教程

    在前端开发中,我们经常需要对于3D模型进行解析和处理,而STL(Standard Triangle Language)文件则是其中一种常见的文件格式。对于STL文件的处理我们可以使用 npm 包 @u...

    2 年前
  • npm 包 fylesaver 使用教程

    前言 在开发前端项目时,我们经常需要实现文件的上传和下载功能。其中,文件的下载功能可能会遇到一些问题,例如兼容性、下载速度等。此时,我们可以使用 npm 包 fylesaver 来解决这些问题。

    2 年前
  • npm 包 osc-king 使用教程

    简介 在 Web 前端的开发中,我们难免会使用一些特殊的工具或库来完成更加复杂的任务。在这些工具和库中,有一类非常特殊,那就是 npm 包。npm 包是 Node.js 中最为流行的包管理工具之一,也...

    2 年前
  • npm 包 css-props-data 使用教程

    作为前端开发者,我们在日常的开发中难免会遇到一些样式问题,比如我们需要快速了解一个 CSS 属性的作用和使用方法等。而 npm 包 css-props-data 就提供了一种非常方便的解决方案。

    2 年前
  • npm 包 yarn-api 使用教程

    什么是 yarn-api ? yarn-api 是一个基于 Node.js 的 npm 包。它提供了与 Yarn 包管理器 API 交互的方法,您可以使用它来查询包信息、安装或卸载包,或者查询可用的包...

    2 年前
  • npm 包 bootstrap-canjs 使用教程

    本文将介绍如何使用 npm 包 bootstrap-canjs,这是一个基于 CanJS 构建的前端 UI 组件库。通过本文,您可以深入了解 bootstrap-canjs 的使用方法,并通过示例代码...

    2 年前

相关推荐

    暂无文章