如何在 aurelia.json 文件中配置第 3 方库，使用 webpack 捆绑器的应用程序

Question

我刚刚使用以下项目配置创建了一个 Aurelia-CLI (v0.33.1) 应用程序：

Name: Sample
Platform: Web
Bundler: Webpack
Loader: None
Transpiler: TypeScript
Markup Processor: Minimal Minification
CSS Processor: Sass
Unit Test Runner: Karma
Integration Test Runner: Protractor
Editor: Visual Studio Code

我在尝试在此项目中配置第 3 方插件时遇到困难，因为所有其他插件都希望我更改 aurelia.json 文件中的 build.bundles.dependencies 部分或内部的 coreBundles.aurelia webpack.config.js 文件，而这两个部分在各自的文件中完全缺失。

雪上加霜的是，au install <package_name> 命令失败并显示消息 "Error: This command is only available for the Aurelia CLI Bundler"

例如aurelia-charts:

https://github.com/SpoonX/aurelia-charts/blob/master/README.md#aureli-cli 它说：

Aurelia-view-manager uses extend, array-equal and typer, so add following to the build.bundles.dependencies section of aurelia-project/aurelia.json

和

https://github.com/SpoonX/aurelia-charts/blob/master/README.md#webpack

它说：

And add aurelia-charts in the coreBundles.aurelia section of your webpack.config.js

这是 aurelia.json 的外观：

{
  "name": "sample",
  "type": "project:application",
  "bundler": {
    "id": "webpack",
    "displayName": "Webpack"
  },
  "build": {
    "options": {
      "server": "dev",
      "extractCss": "prod",
      "coverage": false
    }
  },
  "platform": {
    "id": "web",
    "displayName": "Web",
    "port": 8080,
    "hmr": false,
    "open": false,
    "output": "dist"
  },
  "loader": {
    "id": "none",
    "displayName": "None"
  },
  "transpiler": {
    "id": "typescript",
    "displayName": "TypeScript",
    "fileExtension": ".ts"
  },
  "markupProcessor": {
    "id": "minimum",
    "displayName": "Minimal Minification",
    "fileExtension": ".html"
  },
  "cssProcessor": {
    "id": "sass",
    "displayName": "Sass",
    "fileExtension": ".scss"
  },
  "editor": {
    "id": "vscode",
    "displayName": "Visual Studio Code"
  },
  "unitTestRunner": [
    {
      "id": "karma",
      "displayName": "Karma"
    }
  ],
  "integrationTestRunner": {
    "id": "protractor",
    "displayName": "Protractor"
  },
  "paths": {
    "root": "src",
    "resources": "resources",
    "elements": "resources/elements",
    "attributes": "resources/attributes",
    "valueConverters": "resources/value-converters",
    "bindingBehaviors": "resources/binding-behaviors"
  },
  "testFramework": {
    "id": "jasmine",
    "displayName": "Jasmine"
  }
}

这是我的 webpack.config.js 文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const project = require('./aurelia_project/aurelia.json');
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');
const { ProvidePlugin } = require('webpack');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

// config helpers:
const ensureArray = (config) => config && (Array.isArray(config) ? config : [config]) || [];
const when = (condition, config, negativeConfig) =>
  condition ? ensureArray(config) : ensureArray(negativeConfig);

// primary config:
const title = 'Aurelia Navigation Skeleton';
const outDir = path.resolve(__dirname, project.platform.output);
const srcDir = path.resolve(__dirname, 'src');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');
const baseUrl = '/';

const cssRules = [
  { loader: 'css-loader' },
];

module.exports = ({production, server, extractCss, coverage, analyze} = {}) => ({
  resolve: {
    extensions: ['.ts', '.js'],
    modules: [srcDir, 'node_modules'],
  },
  entry: {
    app: ['aurelia-bootstrapper'],
    vendor: ['bluebird'],
  },
  mode: production ? 'production' : 'development',
  output: {
    path: outDir,
    publicPath: baseUrl,
    filename: production ? '[name].[chunkhash].bundle.js' : '[name].[hash].bundle.js',
    sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
    chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js'
  },
  performance: { hints: false },
  devServer: {
    contentBase: outDir,
    // serve index.html for all 404 (required for push-state)
    historyApiFallback: true
  },
  devtool: production ? 'nosources-source-map' : 'cheap-module-eval-source-map',
  module: {
    rules: [
      // CSS required in JS/TS files should use the style-loader that auto-injects it into the website
      // only when the issuer is a .js/.ts file, so the loaders are not applied inside html templates
      {
        test: /\.css$/i,
        issuer: [{ not: [{ test: /\.html$/i }] }],
        use: extractCss ? ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: cssRules
        }) : ['style-loader', ...cssRules],
      },
      {
        test: /\.css$/i,
        issuer: [{ test: /\.html$/i }],
        // CSS required in templates cannot be extracted safely
        // because Aurelia would try to require it again in runtime
        use: cssRules
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        issuer: /\.[tj]s$/i
      },
      {
        test: /\.scss$/,
        use: ['css-loader', 'sass-loader'],
        issuer: /\.html?$/i
      },
      { test: /\.html$/i, loader: 'html-loader' },
      { test: /\.tsx?$/, loader: "ts-loader" },
      { test: /\.json$/i, loader: 'json-loader' },
      // use Bluebird as the global Promise implementation:
      { test: /[\/\]node_modules[\/\]bluebird[\/\].+\.js$/, loader: 'expose-loader?Promise' },
      // embed small images and fonts as Data Urls and larger ones as files:
      { test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } },
      { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff2' } },
      { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } },
      // load these fonts normally, as files:
      { test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' },
      ...when(coverage, {
        test: /\.[jt]s$/i, loader: 'istanbul-instrumenter-loader',
        include: srcDir, exclude: [/\.{spec,test}\.[jt]s$/i],
        enforce: 'post', options: { esModules: true },
      })
    ]
  },
  plugins: [
    new AureliaPlugin(),
    new ProvidePlugin({
      'Promise': 'bluebird'
    }),
    new ModuleDependenciesPlugin({
      'aurelia-testing': [ './compile-spy', './view-spy' ]
    }),
    new HtmlWebpackPlugin({
      template: 'index.ejs',
      minify: production ? {
        removeComments: true,
        collapseWhitespace: true
      } : undefined,
      metadata: {
        // available in index.ejs //
        title, server, baseUrl
      }
    }),
    ...when(extractCss, new ExtractTextPlugin({
      filename: production ? '[contenthash].css' : '[id].css',
      allChunks: true
    })),
    ...when(production, new CopyWebpackPlugin([
      { from: 'static/favicon.ico', to: 'favicon.ico' }])),
    ...when(analyze, new BundleAnalyzerPlugin())
  ]
});

Answer 1

当您选择 webpack 时，aurelia-cli 所做的唯一一件事就是 "wrap" 各种调用，并为参数和构建任务提供一些语法糖。所以你可以完全停止看 aurelia.json 并将注意力集中在 webpack.config.

使用 webpack，您无需显式配置依赖项 - 您配置的唯一内容是用于处理各种文件类型的加载程序和插件。您需要做的就是在应用程序的某个位置导入依赖项，webpack 会找到它并在构建过程中包含它。

在这方面，您在与 aurelia.json 有关的指南或博客中看到的任何说明 - 只需忽略它们并首先尝试 "naively" 将依赖项导入某处。在大多数情况下，它确实可以正常工作。

如何在 aurelia.json 文件中配置第 3 方库，使用 webpack 捆绑器的应用程序

How do I configure 3rd party libraries in aurelia.json file, app with webpack bundler

webpack

aurelia