代码之家  ›  专栏  ›  技术社区  ›  Manish Surolia

如何在aurelia中配置第三方库。json文件,带有Web包捆绑程序的应用程序

  •  2
  • Manish Surolia  · 技术社区  · 7 年前

    我刚刚创建了一个具有以下项目配置的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
    

    我很难在这个项目中配置第三方插件,因为其他插件都希望我对其中任何一个进行更改 build.bundles.dependencies 奥雷利亚部分。json文件或 coreBundles.aurelia 网页包内部。配置。js文件,而这两个部分在各自的文件中完全缺失。

    更加悲惨的是, au install <package_name> 命令失败并显示消息 “错误:此命令仅适用于Aurelia CLI捆绑程序”

    比如说 奥雷利亚海图 :

    https://github.com/SpoonX/aurelia-charts/blob/master/README.md#aureli-cli 上面写着:

    Aurelia视图管理器使用extend、array equal和typer,因此添加 遵循构建。捆绑包。的依赖项部分 奥雷利亚项目/奥雷利亚。json

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

    上面写着:

    并在coreBundles中添加aurelia图表。您的aurelia部分 网页包。配置。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())
      ]
    });
    
    1 回复  |  直到 7 年前
        1
  •  1
  •   Fred Kleuver    7 年前

    选择webpack时,aurelia cli所做的唯一一件事就是“包装”各种调用,并为参数和构建任务提供一些语法糖分。所以你可以完全停止看 aurelia.json 把你的注意力集中在 webpack.config

    使用webpack,您不需要显式配置依赖项,只需配置加载程序和插件来处理各种文件类型。您只需将依赖项导入应用程序中的某个位置,Web包就会找到它并在构建过程中包含它。

    在这方面,您在指南或博客中看到的关于 奥雷莉亚。json -忽略它们,首先尝试“天真地”将依赖关系导入到某个地方。在大多数情况下,它真的只会起作用。