Babel 工具链集成 #

与 Webpack 集成 #

安装依赖 #

bash

npm install --save-dev babel-loader @babel/core @babel/preset-env

基本配置 #

javascript

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

使用配置文件 #

javascript

// babel.config.js
module.exports = {
  presets: ['@babel/preset-env']
};

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};

完整 Webpack 配置 #

javascript

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true
          }
        }
      },
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx']
  }
};

React 项目配置 #

javascript

// babel.config.js
module.exports = {
  presets: [
    '@babel/preset-env',
    ['@babel/preset-react', { runtime: 'automatic' }]
  ]
};

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};

TypeScript 项目配置 #

javascript

// babel.config.js
module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-typescript'
  ]
};

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};

与 Vite 集成 #

安装依赖 #

bash

npm install --save-dev @babel/core @babel/preset-env

自动集成 #

Vite 默认支持 babel.config.js：

javascript

// babel.config.js
module.exports = {
  presets: ['@babel/preset-env']
};

// vite.config.js
// 无需额外配置，Vite 自动读取 babel.config.js

使用插件 #

javascript

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      babel: {
        presets: ['@babel/preset-env'],
        plugins: ['babel-plugin-transform-remove-console']
      }
    })
  ]
});

完整 Vite 配置 #

javascript

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      babel: {
        presets: [
          '@babel/preset-env',
          '@babel/preset-typescript'
        ],
        plugins: [
          '@babel/plugin-transform-runtime'
        ]
      }
    })
  ],
  build: {
    target: 'es2015'
  }
});

与 Rollup 集成 #

安装依赖 #

bash

npm install --save-dev @rollup/plugin-babel @babel/core @babel/preset-env

基本配置 #

javascript

// rollup.config.js
import { babel } from '@rollup/plugin-babel';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'es'
  },
  plugins: [
    babel({
      babelHelpers: 'bundled',
      presets: ['@babel/preset-env']
    })
  ]
};

使用配置文件 #

javascript

// babel.config.js
module.exports = {
  presets: ['@babel/preset-env']
};

// rollup.config.js
import { babel } from '@rollup/plugin-babel';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'es'
  },
  plugins: [
    babel({
      babelHelpers: 'bundled'
    })
  ]
};

完整 Rollup 配置 #

javascript

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { babel } from '@rollup/plugin-babel';
import terser from '@rollup/plugin-terser';

export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/bundle.cjs.js',
      format: 'cjs',
      sourcemap: true
    },
    {
      file: 'dist/bundle.esm.js',
      format: 'es',
      sourcemap: true
    }
  ],
  plugins: [
    resolve(),
    commonjs(),
    babel({
      babelHelpers: 'bundled',
      exclude: 'node_modules/**'
    }),
    terser()
  ],
  external: ['lodash']
};

与 ESLint 集成 #

安装依赖 #

bash

npm install --save-dev eslint @babel/eslint-parser

配置 ESLint #

javascript

// .eslintrc.js
module.exports = {
  parser: '@babel/eslint-parser',
  parserOptions: {
    requireConfigFile: false,
    babelOptions: {
      presets: ['@babel/preset-env']
    }
  },
  extends: ['eslint:recommended'],
  rules: {
    // 自定义规则
  }
};

React 项目配置 #

javascript

// .eslintrc.js
module.exports = {
  parser: '@babel/eslint-parser',
  parserOptions: {
    requireConfigFile: false,
    babelOptions: {
      presets: [
        '@babel/preset-env',
        '@babel/preset-react'
      ]
    },
    ecmaFeatures: {
      jsx: true
    }
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended'
  ],
  plugins: ['react']
};

TypeScript 项目配置 #

javascript

// .eslintrc.js
module.exports = {
  parser: '@babel/eslint-parser',
  parserOptions: {
    requireConfigFile: false,
    babelOptions: {
      presets: [
        '@babel/preset-env',
        '@babel/preset-typescript'
      ]
    }
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  plugins: ['@typescript-eslint']
};

与 Jest 集成 #

安装依赖 #

bash

npm install --save-dev jest babel-jest @babel/core @babel/preset-env

基本配置 #

javascript

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }]
  ]
};

// jest.config.js
module.exports = {
  transform: {
    '^.+\\.js$': 'babel-jest'
  }
};

React 测试配置 #

javascript

// babel.config.js
module.exports = function(api) {
  const isTest = api.env('test');

  return {
    presets: [
      ['@babel/preset-env', { targets: isTest ? { node: 'current' } : '> 0.25%' }],
      '@babel/preset-react'
    ]
  };
};

// jest.config.js
module.exports = {
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.[jt]sx?$': 'babel-jest'
  }
};

TypeScript 测试配置 #

javascript

// babel.config.js
module.exports = function(api) {
  const isTest = api.env('test');

  return {
    presets: [
      ['@babel/preset-env', { targets: isTest ? { node: 'current' } : '> 0.25%' }],
      '@babel/preset-typescript'
    ]
  };
};

// jest.config.js
module.exports = {
  transform: {
    '^.+\\.tsx?$': 'babel-jest'
  }
};

与 Gulp 集成 #

安装依赖 #

bash

npm install --save-dev gulp @babel/core @babel/preset-env gulp-babel

基本配置 #

javascript

// gulpfile.js
const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('scripts', () => {
  return gulp.src('src/**/*.js')
    .pipe(babel({
      presets: ['@babel/preset-env']
    }))
    .pipe(gulp.dest('dist'));
});

gulp.task('default', gulp.series('scripts'));

完整 Gulp 配置 #

javascript

// gulpfile.js
const gulp = require('gulp');
const babel = require('gulp-babel');
const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');

gulp.task('scripts', () => {
  return gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
    .pipe(babel({
      presets: ['@babel/preset-env']
    }))
    .pipe(gulp.dest('dist'))
    .pipe(uglify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist'));
});

gulp.task('watch', () => {
  gulp.watch('src/**/*.js', gulp.series('scripts'));
});

gulp.task('default', gulp.series('scripts', 'watch'));

与 Node.js 集成 #

使用 @babel/register #

bash

npm install --save-dev @babel/register @babel/core @babel/preset-env

javascript

// 入口文件 (如 require hooks)
require('@babel/register')({
  presets: ['@babel/preset-env'],
  ignore: [/node_modules/]
});

require('./app');

使用 @babel/node #

bash

npm install --save-dev @babel/node @babel/core @babel/preset-env

json

// package.json
{
  "scripts": {
    "dev": "babel-node src/index.js",
    "start": "node dist/index.js",
    "build": "babel src -d dist"
  }
}

生产环境运行 #

javascript

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: { node: 'current' }
    }]
  ]
};

// package.json
{
  "scripts": {
    "build": "babel src -d dist",
    "start": "node dist/index.js"
  }
}

与 TypeScript 编译器集成 #

Babel + tsc 组合 #

json

// tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "noEmit": true,
    "isolatedModules": true
  }
}

javascript

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    '@babel/preset-typescript'
  ]
};

// package.json
{
  "scripts": {
    "typecheck": "tsc --noEmit",
    "build": "babel src -d dist --extensions .ts,.tsx",
    "test": "npm run typecheck && npm run build"
  }
}

与其他工具集成 #

与 ESLint + Prettier 集成 #

javascript

// .eslintrc.js
module.exports = {
  parser: '@babel/eslint-parser',
  parserOptions: {
    requireConfigFile: false,
    babelOptions: {
      presets: ['@babel/preset-env']
    }
  },
  extends: [
    'eslint:recommended',
    'prettier'
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error'
  }
};

// .prettierrc
{
  "semi": true,
  "singleQuote": true
}

与 Husky + lint-staged 集成 #

json

// package.json
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  },
  "scripts": {
    "lint": "eslint src --fix",
    "format": "prettier --write src/**/*.{js,jsx,ts,tsx}",
    "prepare": "husky install"
  }
}

与 Docker 集成 #

dockerfile

# Dockerfile
FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm ci --only=production

COPY . .
RUN npm run build

CMD ["npm", "start"]

与 CI/CD 集成 #

yaml

# .github/workflows/ci.yml
name: CI

on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'

      - run: npm ci
      - run: npm run lint
      - run: npm run test
      - run: npm run build

完整项目示例 #

React + Webpack 项目 #

javascript

// babel.config.js
module.exports = function(api) {
  const isProduction = api.env('production');

  return {
    presets: [
      ['@babel/preset-env', {
        targets: '> 0.25%, not dead',
        useBuiltIns: 'usage',
        corejs: 3
      }],
      ['@babel/preset-react', { runtime: 'automatic' }]
    ],
    plugins: [
      '@babel/plugin-transform-runtime',
      isProduction && 'babel-plugin-transform-remove-console'
    ].filter(Boolean)
  };
};

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js'
  },
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true
          }
        }
      }
    ]
  }
};

Node.js + TypeScript 项目 #

javascript

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    '@babel/preset-typescript'
  ],
  plugins: [
    '@babel/plugin-transform-runtime'
  ]
};

// package.json
{
  "scripts": {
    "build": "babel src -d dist --extensions .ts",
    "dev": "babel-node src/index.ts --extensions .ts",
    "start": "node dist/index.js",
    "typecheck": "tsc --noEmit"
  }
}

下一步 #

现在你已经掌握了 Babel 与各种工具的集成方法，接下来学习最佳实践了解更多开发技巧！