Babel

Babel is a JavaScript compiler that allows you to use next-generation JavaScript features and JSX syntax in your code. PackShip uses Babel to transpile your TypeScript and React code into JavaScript that can run in all browsers.

Default Configuration

When you initialize a new project with PackShip, it generates a default Babel configuration in the babel.config.json file:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "env": {
    "test": {
      "presets": [
        "@babel/preset-env",
        "@babel/preset-react",
        "@babel/preset-typescript"
      ],
      "plugins": [
        [
          "@babel/plugin-proposal-class-properties",
          {
            "spec": true
          }
        ]
      ]
    }
  },
  "plugins": [
    [
      "@babel/plugin-proposal-class-properties",
      {
        "spec": true
      }
    ],
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

Babel Presets

Presets are collections of plugins that support specific language features or frameworks:

@babel/preset-env

This preset allows you to use the latest JavaScript features without worrying about which syntax transforms are needed for your target environments.

In PackShip's default configuration, preset-env is configured with:

[
  "@babel/preset-env",
  {
    "modules": false,
    "targets": {
      "node": "current"
    }
  }
]

• modules: false: Preserves ES modules syntax for webpack to handle, enabling tree-shaking optimizations
• targets.node: "current": Targets the Node.js version you're currently using for development

@babel/preset-react

This preset includes plugins for React JSX syntax and other React-specific features.

You can customize it to use the new JSX transform introduced in React 17:

[
  "@babel/preset-react",
  {
    "runtime": "automatic"
  }
]

@babel/preset-typescript

This preset allows Babel to transpile TypeScript code. It strips away TypeScript type annotations and transforms the code to JavaScript.

You can customize it to handle specific TypeScript features:

{
  "presets": [
    // ... other presets
    ["@babel/preset-typescript", {
      "isTSX": true,
      "allExtensions": true
    }]
  ]
}

Babel Plugins

Plugins are individual JavaScript transformations that Babel applies to your code:

@babel/plugin-proposal-class-properties

This plugin allows you to use class properties syntax in your JavaScript classes. In PackShip, it's configured with spec: true for stricter spec compliance:

[
  "@babel/plugin-proposal-class-properties",
  {
    "spec": true
  }
]

This enables you to write class components with class properties:

class MyComponent extends React.Component {
  // Class property
  state = {
    count: 0
  };

  // Arrow function class property (auto-binds 'this')
  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <button onClick={this.handleClick}>
        Clicked {this.state.count} times
      </button>
    );
  }
}

@babel/plugin-proposal-object-rest-spread

This plugin enables the use of the rest and spread operators for objects:

// Rest operator
const { id, ...rest } = props;

// Spread operator
const newProps = { ...props, newProp: 'value' };

Environment-Specific Configuration

PackShip's Babel configuration includes environment-specific settings using the env key. For example, the test environment has its own configuration:

"env": {
  "test": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react",
      "@babel/preset-typescript"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-class-properties",
        {
          "spec": true
        }
      ]
    ]
  }
}

Customizing Babel Configuration

You can customize the Babel configuration to suit your specific needs. Here are some common customizations:

Targeting Specific Browsers

To target specific browsers instead of Node.js, modify the preset-env configuration:

[
  "@babel/preset-env",
  {
    "modules": false,
    "targets": {
      "browsers": [
        "last 2 versions",
        "not dead",
        "> 0.5%"
      ]
    }
  }
]

Adding Support for Decorators

To add support for decorators (used in libraries like MobX), you need to install the decorator plugin:

npm install --save-dev @babel/plugin-proposal-decorators

Then update your Babel configuration:

{
  "presets": [
    // ... existing presets
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "spec": true }],
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

Adding Runtime Helpers

To reduce bundle size by extracting Babel helpers, add the transform-runtime plugin:

npm install --save-dev @babel/plugin-transform-runtime

{
  "plugins": [
    // ... existing plugins
    "@babel/plugin-transform-runtime"
  ]
}

Using Babel with Webpack

In PackShip projects, Babel is integrated with Webpack using babel-loader. The webpack configuration includes rules for processing TypeScript and JavaScript files with Babel:

// webpack.config.js
export default {
  // ... other config
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
            },
          },
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-react', '@babel/preset-env'],
            },
          },
        ],
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      // ... other rules
    ]
  }
};

This configuration uses both ts-loader and babel-loader for TypeScript files:

• ts-loader: Handles TypeScript compilation with transpileOnly: true for faster builds
• babel-loader: Applies Babel transformations to the output from ts-loader