npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@dawnjs/dn-middleware-babel

v2.1.1

Published

Transform code with babel

Downloads

38

Readme

@dawnjs/dn-middleware-babel

npm npm

该中间件提供使用 Babel 进行代码编译,主要用于仅编译不打包场景,如果需要进行资源打包,推荐使用 rollup 或 webpack 中间件

功能亮点

  • 高内聚的 Babel 默认配置,绝大部分场景零配置或者仅需少量配置
  • 支持 TypeScript 及其类型检查
  • 支持 ESM 输出格式

示例

dev:
  - name: '@dawnjs/dn-middleware-babel'
    watch: true

build:
  - name: '@dawnjs/dn-middleware-babel'

配置项说明

支持项目本地使用 Babel 配置文件覆盖默认配置

env

类型:"development" | "production" 默认值:process.env.NODE_ENV

cwd

类型:string 默认值:process.cwd()

文件相对路径的起始点,默认为执行 dn 命令所在的目录,通常情况为项目的根目录

watch

类型:boolean 默认值:false

type

类型:"esm" | "cjs" 默认值:"cjs"

target

类型:"browser" | "node" 默认值:"node"

指定编译结果的目标运行环境

说明:当配置为 "browser" 时,可通过 .browserslistrc 指定目标浏览器范围,详细配置请查看相关文档

srcDir

类型:string 默认值:"src"

include

类型:string[] 默认值:["**/*"]

指定编译需要包含的文件,支持 glob 语法

exclude

类型:string[] 默认值:["**/__test__{,/**}", "**/*.+(test|e2e|spec).+(js|jsx|ts|tsx)"]

指定编译需要排除的文件,支持 glob 语法

output

类型:string 默认值:当 type"esm" 时,为 "es" ;当 type"cjs" 时,为 "lib"

目标输入目录,如果不配置,会根据 type 不同,分别设置不同的目录

runtimeHelpers

类型:boolean | string 默认值:false

配置是否加入 @babel/plugin-transform-runtime 支持,如果为字符串,则用于指定 @babel/runtime@babel/runtime-corejs2@babel/runtime-corejs3 的版本号,具体是哪个包,由 corejs 配置项决定

corejs

类型:false | 2 | 3 | { version: 2 | 3; proposals: boolean } 默认值:false

配置 @babel/preset-envcorejs 选项和 @babel/plugin-transform-runtimecorejs 选项

runtimeHelperscorejs 通常需要配合使用,具体说明如下

当使用 runtimeHelpers 时,corejs 作为 @babel/plugin-transform-runtime 的选项

  • corejsfalse 时,如果项目中未申明 @babel/runtime 依赖,会根据 runtimeHelpers 指定的版本号(未指定时安装最新版本)安装对应的 @babel/runtime 依赖
  • corejs 指定的版本号为 2 时,如果项目中未申明 @babel/runtime-corejs2 依赖,会根据 runtimeHelpers 指定的版本号(未指定时安装最新版本)安装对应的 @babel/runtime-corejs2 依赖
  • corejs 指定的版本号为 3 时,如果项目中未申明 @babel/runtime-corejs3 依赖,会根据 runtimeHelpers 指定的版本号(未指定时安装最新版本)安装对应的 @babel/runtime-corejs3 依赖

jsxRuntime

类型:"automatic" | "classic" 默认值:

配置 @babel/preset-reactruntime 选项

pragma

类型:string 默认值:React.createElement

配置 @babel/preset-reactpragma 选项

pragmaFrag

类型:string 默认值:React.Fragment

配置 @babel/preset-reactpragmaFrag 选项

disableAutoReactRequire

类型:boolean 默认值:

配置是否排除 babel-plugin-react-require。默认情况下不会排除,但如果 jsxRuntime 设置为 "automatic" 并且使用了支持新 JSX Runtime 的 React 版本,则默认排除

extraPresets

类型:any[] 默认值:[]

extraPlugins

类型:any[] 默认值:[]

nodeVersion

类型:string | "current" | true 默认值:"10"

target"node" 时有效,用于指定目标执行环境,可配置项参考相关文档

disableTypeCheck

类型:boolean 默认值:false

说明:默认开启类型检查时,TS 文件会先经过 Typescript 编译一次,产出 JS 文件后再经过 Babel 编译。如果项目本地有配置 tsconfig.json 的话,推荐把其中的 target 配置为 "ESNext" ,把对目标环境的语法转换交给 Babel 处理

noEmit

类型:boolean 默认值:false

不实际执行编译,通常用于作为其他中间件获取 Babel 配置使用,比如 webpackrollup 。有以下几种使用方式:

  • 隐式依赖(推荐)

const { babelOpts } = await ctx.exec({ name: '@dawnjs/dn-middleware-babel', noEmit: true /* any other options */ });
ctx.console.log(babelOpts);
  • 显示依赖(方式一)

build:
  - name: '@dawnjs/dn-middleware-babel'
    noEmit: true
  - name: rollup # 必须紧跟在babel中间件之后

在 rollup 中间件中

export default opts => {
  return async (next, ctx, args) => {
    if (args && args.babelOpts) {
      ctx.console.log(args.babelOpts);
    }
    // ...
  };
};
  • 显示依赖(方式二)

build:
  - name: '@dawnjs/dn-middleware-babel'
    noEmit: true
  - name: some-other-middleware
  - name: rollup # 不需要紧跟在babel中间件之后

在 rollup 中间件中

ctx.on('babel.config', babelOpts => {
  ctx.console.log(babelOpts);
});