tessl/npm-ember-cli-babel

Ember CLI addon that integrates Babel transpilation with ES6+ support, TypeScript handling, and Ember-specific optimizations.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

ember-cli-babel

Name: tessl/npm-ember-cli-babel
Author: tessl

ember-cli-babel is an Ember CLI addon that integrates Babel transpilation into Ember.js applications and addons. It provides seamless ES6+ to ES5 transpilation using @babel/preset-env with automatic target browser detection, supports custom Babel plugin configuration, TypeScript transpilation, external helper bundling for optimized builds, and comprehensive debug tooling integration.

Package Information

Package Name: ember-cli-babel
Package Type: npm
Language: JavaScript
Installation: ember install ember-cli-babel (automatically included in Ember CLI projects)

Core Imports

As an Ember CLI addon, ember-cli-babel is typically not imported directly in application code. However, for addon developers or external configuration:

// For external Babel configuration
const { buildEmberPlugins } = require('ember-cli-babel');

// For addon developers accessing the addon instance
let babelAddon = this.addons.find(addon => addon.name === 'ember-cli-babel');

// For utility functions
const findApp = require('ember-cli-babel/lib/find-app');
const { getRelativeModulePath, resolveRelativeModulePath } = require('ember-cli-babel/lib/relative-module-paths');
const getBabelOptions = require('ember-cli-babel/lib/get-babel-options');
const defaultShouldIncludeHelpers = require('ember-cli-babel/lib/default-should-include-helpers');

// For advanced Babel plugin development
const dedupePlugin = require('ember-cli-babel/lib/dedupe-internal-decorators-plugin');

Basic Usage

ember-cli-babel works automatically once installed. It transpiles all .js files (and .ts files when TypeScript is enabled) in your Ember project.

Basic configuration in ember-cli-build.js:

let app = new EmberApp(defaults, {
  'ember-cli-babel': {
    // Enable external helpers for smaller bundles
    includeExternalHelpers: true,
    // Enable TypeScript transpilation
    enableTypeScriptTransform: true
  },
  babel: {
    // Enable source maps for debugging
    sourceMaps: 'inline',
    // Add custom plugins
    plugins: [
      require.resolve('babel-plugin-transform-object-rest-spread')
    ]
  }
});

External Babel configuration using buildEmberPlugins:

// babel.config.js
const { buildEmberPlugins } = require('ember-cli-babel');

module.exports = function(api) {
  api.cache(true);
  
  return {
    presets: [
      [require.resolve('@babel/preset-env'), {
        targets: require('./config/targets')
      }]
    ],
    plugins: [
      // Ember-specific plugins
      ...buildEmberPlugins(__dirname),
      // Custom plugins
      require.resolve('my-custom-plugin')
    ]
  };
};

Architecture

ember-cli-babel is built around several key components:

Addon Interface: Core Ember CLI addon that hooks into the build pipeline
Configuration System: Flexible configuration supporting both ember-cli-babel and direct Babel options
Plugin Management: Automatic assembly of Ember-specific Babel plugins based on environment and dependencies
Target Detection: Integration with Ember CLI's targets system for optimal transpilation
Helper Management: Intelligent inclusion of Babel runtime helpers for bundle optimization
Debug Tooling: Automatic stripping of debug statements in production builds

Capabilities

Core Addon Interface

Main addon object providing methods for transpilation, configuration, and integration with the Ember CLI build pipeline.

// Main addon object interface
interface EmberCLIBabelAddon {
  buildBabelOptions(type: 'babel' | 'broccoli', config?: object): object;
  transpileTree(inputTree: BroccoliTree, config?: object): BroccoliTree;
  getSupportedExtensions(config?: object): string[];
  isPluginRequired(pluginName: string): boolean;
  shouldCompileModules(): boolean;
}

Core Addon Interface

Configuration Options

Comprehensive configuration system supporting both babel and ember-cli-babel specific options for customizing transpilation behavior.

interface EmberCLIBabelConfig {
  'ember-cli-babel'?: {
    includeExternalHelpers?: boolean;
    compileModules?: boolean;
    disableDebugTooling?: boolean;
    disablePresetEnv?: boolean;
    enableTypeScriptTransform?: boolean;
    extensions?: string[];
    useBabelConfig?: boolean;
  };
  babel?: {
    sourceMaps?: boolean | 'inline' | 'both';
    plugins?: BabelPlugin[];
    loose?: boolean;
    spec?: boolean;
  };
}

Configuration Options

Plugin Generation

External API for generating Ember-specific Babel plugins for use in custom babel.config.js files, enabling advanced build customization.

function buildEmberPlugins(appRoot: string, config?: PluginConfig): BabelPlugin[];

interface PluginConfig {
  disableModuleResolution?: boolean;
  emberDataVersionRequiresPackagesPolyfill?: boolean;
  shouldIgnoreJQuery?: boolean;
  shouldIgnoreEmberString?: boolean;
  shouldIgnoreDecoratorAndClassPlugins?: boolean;
  disableEmberModulesAPIPolyfill?: boolean;
}

Plugin Generation

Utility Functions

Helper functions for addon developers who need to integrate with ember-cli-babel or perform custom transpilation tasks.

// Key utility functions available to addon developers
function findApp(addon: EmberAddon): EmberApp | undefined;
function getRelativeModulePath(modulePath: string): string;
function resolveRelativeModulePath(name: string, child: string): string;

Utility Functions

Types

type BabelPlugin = string | [string, any] | [any, any];

interface BroccoliTree {
  // Broccoli tree interface for build pipeline
  // Represents a tree of files in the build system
  inputPaths?: string[];
  outputPath?: string;
  cachePath?: string;
}

interface EmberAddon {
  name: string;
  parent: EmberAddon | EmberApp;
  project: EmberProject;
  addons: EmberAddon[];
  options?: object;
}

interface EmberApp {
  options: object;
  project: EmberProject;
}

interface EmberProject {
  name(): string;
  emberCLIVersion(): string;
  targets?: object;
  dependencies(): object;
  addons: EmberAddon[];
}