TypeScript webpack.AngularCompilerPlugin類代碼示例

export function getAotConfig(wco: WebpackConfigOptions) {
  const { projectRoot, buildOptions, appConfig } = wco;
  const tsConfigPath = path.resolve(projectRoot, appConfig.root, appConfig.tsconfig);
  const testTsConfigPath = path.resolve(projectRoot, appConfig.root, appConfig.testTsconfig);

  let pluginOptions: any = { tsConfigPath };

  // Fallback to exclude spec files from AoT compilation on projects using a shared tsconfig.
  if (testTsConfigPath === tsConfigPath) {
    let exclude = [ '**/*.spec.ts' ];
    if (appConfig.test) {
      exclude.push(path.join(projectRoot, appConfig.root, appConfig.test));
    }
    pluginOptions.exclude = exclude;
  }

  let boLoader: any = [];
  if (buildOptions.buildOptimizer) {
    boLoader = [{
      loader: '@angular-devkit/build-optimizer/webpack-loader',
      options: { sourceMap: buildOptions.sourcemaps }
    }];
  }

  const test = AngularCompilerPlugin.isSupported()
    ? /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/
    : /\.ts$/;

  return {
    module: { rules: [{ test, use: [...boLoader, webpackLoader] }] },
    plugins: [ _createAotPlugin(wco, pluginOptions) ]
  };
}

  // Fill in defaults for build targets
  public addTargetDefaults(buildOptions: T): T {
    const targetDefaults: { [target: string]: Partial<BuildOptions> } = {
      development: {
        environment: 'dev',
        outputHashing: 'media',
        sourcemaps: true,
        extractCss: false,
        namedChunks: true,
        aot: AngularCompilerPlugin.isSupported(),
        buildOptimizer: false
      },
      production: {
        environment: 'prod',
        outputHashing: 'all',
        sourcemaps: false,
        extractCss: true,
        namedChunks: false,
        aot: true
      }
    };

    let merged = Object.assign({}, targetDefaults[buildOptions.target], buildOptions);

    // Use Build Optimizer on prod AOT builds by default when AngularCompilerPlugin is supported.
    const buildOptimizerDefault = {
      buildOptimizer: buildOptions.target == 'production' && AngularCompilerPlugin.isSupported()
    };

    merged = Object.assign({}, buildOptimizerDefault, merged);

    // Default vendor chunk to false when build optimizer is on.
    const vendorChunkDefault = {
      vendorChunk: !merged.buildOptimizer
    };

    merged = Object.assign({}, vendorChunkDefault, merged);

    return merged;
  }

  // Validate build options
  public validateBuildOptions(buildOptions: BuildOptions) {
    buildOptions.target = buildOptions.target || 'development';
    if (buildOptions.target !== 'development' && buildOptions.target !== 'production') {
      throw new Error("Invalid build target. Only 'development' and 'production' are available.");
    }

    if (buildOptions.buildOptimizer
      && !(buildOptions.aot || buildOptions.target === 'production')) {
      throw new Error('The `--build-optimizer` option cannot be used without `--aot`.');
    }

    if (buildOptions.experimentalAngularCompiler && !AngularCompilerPlugin.isSupported()) {
      throw new Error('You need Angular 5 and up to use --experimental-angular-compiler.');
    }
  }

  run: function (runTaskOptions: any) {
    const appConfig = getAppFromConfig(runTaskOptions.app);
    const useExperimentalAngularCompiler = AngularCompilerPlugin.isSupported();

    // We need to determine the outFile name so that AngularCompiler can retrieve it.
    let outFile = runTaskOptions.outFile || getI18nOutfile(runTaskOptions.i18nFormat);
    if (useExperimentalAngularCompiler && runTaskOptions.outputPath) {
      // AngularCompilerPlugin doesn't support genDir so we have to adjust outFile instead.
      outFile = join(runTaskOptions.outputPath, outFile);
    }

    const config = new XI18nWebpackConfig({
      genDir: runTaskOptions.outputPath || appConfig.root,
      buildDir: '.tmp',
      i18nFormat: runTaskOptions.i18nFormat,
      locale: runTaskOptions.locale,
      outFile: outFile,
      verbose: runTaskOptions.verbose,
      progress: runTaskOptions.progress,
      app: runTaskOptions.app,
      aot: useExperimentalAngularCompiler,
    }, appConfig).buildConfig();

    const webpackCompiler = webpack(config);
    webpackCompiler.outputFileSystem = new MemoryFS();
    const statsConfig = getWebpackStatsConfig(runTaskOptions.verbose);

    return new Promise((resolve, reject) => {
      const callback: webpack.compiler.CompilerCallback = (err, stats) => {
        if (err) {
          return reject(err);
        }

        const json = stats.toJson('verbose');
        if (stats.hasWarnings()) {
          this.ui.writeLine(statsWarningsToString(json, statsConfig));
        }
        if (stats.hasErrors()) {
          reject(statsErrorsToString(json, statsConfig));
        } else {
          resolve();
        }
      };

      webpackCompiler.run(callback);
    });
  }

export function getNonAotTestConfig(wco: WebpackConfigOptions) {
  const { projectRoot, appConfig } = wco;
  const tsConfigPath = path.resolve(projectRoot, appConfig.root, appConfig.testTsconfig);
  const appTsConfigPath = path.resolve(projectRoot, appConfig.root, appConfig.tsconfig);

  let pluginOptions: any = { tsConfigPath, skipCodeGeneration: true };

  if (AngularCompilerPlugin.isSupported()) {
    if (appConfig.polyfills) {
      // TODO: remove singleFileIncludes for 2.0, this is just to support old projects that did not
      // include 'polyfills.ts' in `tsconfig.spec.json'.
      const polyfillsPath = path.resolve(projectRoot, appConfig.root, appConfig.polyfills);
      pluginOptions.singleFileIncludes = [polyfillsPath];
    }
  } else {
    // The options below only apply to AoTPlugin.
    // Force include main and polyfills.
    // This is needed for AngularCompilerPlugin compatibility with existing projects,
    // since TS compilation there is stricter and tsconfig.spec.ts doesn't include them.
    const include = [appConfig.main, appConfig.polyfills, '**/*.spec.ts'];
    if (appConfig.test) {
      include.push(appConfig.test);
    }

    pluginOptions.include = include;

    // Fallback to correct module format on projects using a shared tsconfig.
    if (tsConfigPath === appTsConfigPath) {
      pluginOptions.compilerOptions = { module: 'commonjs' };
    }
  }

  return {
    module: { rules: [{ test: /\.ts$/, loader: webpackLoader }] },
    plugins: [ _createAotPlugin(wco, pluginOptions, false) ]
  };
}

    description: '(Experimental) Enables @angular-devkit/build-optimizer '
    + 'optimizations when using `--aot`.'
  },
  {
    name: 'named-chunks',
    type: Boolean,
    aliases: ['nc'],
    description: 'Use file name for lazy loaded chunks.',
    default: buildConfigDefaults['namedChunks']
  },
  {
    name: 'experimental-angular-compiler',
    type: Boolean,
    // aliases: ['eac'],  // We should not have shorthand aliases for experimental flags.
    description: '(Experimental) Use new Angular Compiler (Angular version 5 and greater only).',
    default: AngularCompilerPlugin.isSupported()
  }
];

export interface BuildTaskOptions extends BuildOptions {
  statsJson?: boolean;
}

const BuildCommand = Command.extend({
  name: 'build',
  description: 'Builds your app and places it into the output path (dist/ by default).',
  aliases: ['b'],

  availableOptions: baseBuildCommandOptions.concat([
    {
      name: 'stats-json',

function _createAotPlugin(wco: WebpackConfigOptions, options: any, useMain = true) {
  const { appConfig, projectRoot, buildOptions } = wco;
  options.compilerOptions = options.compilerOptions || {};

  if (wco.buildOptions.preserveSymlinks) {
    options.compilerOptions.preserveSymlinks = true;
  }

  // Forcing commonjs seems to drastically improve rebuild speeds on webpack.
  // Dev builds on watch mode will set this option to true.
  if (wco.buildOptions.forceTsCommonjs) {
    options.compilerOptions.module = 'commonjs';
  }

  // Read the environment, and set it in the compiler host.
  let hostReplacementPaths: any = {};
  // process environment file replacement
  if (appConfig.environments) {
    if (!appConfig.environmentSource) {
      let migrationMessage = '';
      if ('source' in appConfig.environments) {
        migrationMessage = '\n\n' + stripIndent`
          A new environmentSource entry replaces the previous source entry inside environments.

          To migrate angular-cli.json follow the example below:

          Before:

          "environments": {
            "source": "environments/environment.ts",
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts"
          }


          After:

          "environmentSource": "environments/environment.ts",
          "environments": {
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts"
          }
        `;
      }
      throw new SilentError(
        `Environment configuration does not contain "environmentSource" entry.${migrationMessage}`
      );

    }
    if (!(buildOptions.environment in appConfig.environments)) {
      throw new SilentError(`Environment "${buildOptions.environment}" does not exist.`);
    }

    const appRoot = path.resolve(projectRoot, appConfig.root);
    const sourcePath = appConfig.environmentSource;
    const envFile = appConfig.environments[buildOptions.environment];

    hostReplacementPaths = {
      [path.resolve(appRoot, sourcePath)]: path.resolve(appRoot, envFile)
    };
  }

  if (AngularCompilerPlugin.isSupported()) {
    const pluginOptions: AngularCompilerPluginOptions = Object.assign({}, {
      mainPath: useMain ? path.join(projectRoot, appConfig.root, appConfig.main) : undefined,
      i18nInFile: buildOptions.i18nFile,
      i18nInFormat: buildOptions.i18nFormat,
      i18nOutFile: buildOptions.i18nOutFile,
      i18nOutFormat: buildOptions.i18nOutFormat,
      locale: buildOptions.locale,
      platform: appConfig.platform === 'server' ? PLATFORM.Server : PLATFORM.Browser,
      missingTranslation: buildOptions.missingTranslation,
      hostReplacementPaths,
      sourceMap: buildOptions.sourcemaps,
    }, options);
    return new AngularCompilerPlugin(pluginOptions);
  } else {
    const pluginOptions: AotPluginOptions = Object.assign({}, {
      mainPath: path.join(projectRoot, appConfig.root, appConfig.main),
      i18nFile: buildOptions.i18nFile,
      i18nFormat: buildOptions.i18nFormat,
      locale: buildOptions.locale,
      replaceExport: appConfig.platform === 'server',
      missingTranslation: buildOptions.missingTranslation,
      hostReplacementPaths,
      sourceMap: buildOptions.sourcemaps,
      // If we don't explicitely list excludes, it will default to `['**/*.spec.ts']`.
      exclude: []
    }, options);
    return new AotPlugin(pluginOptions);
  }
}