Question

最近开始使用Aurelia，我在导入bootstrap 4时遇到了一些问题。我已经使用Aurelia-CLI使用打字稿和基本webpack设置来设置应用程序。

我最初尝试按照此处的指南进行操作：https://aureliacasts.com/blog/2018/01/05/aurelia-app-with-bootstrap-4/但最终出现错误＆＃34;找不到模块：错误：无法解决＆bootnsrap / css / bootstrap.css＆＃39;在＆C; \ project \ app \ src＆＃39;

中

我已经用npm安装了jQuery，Bootstrap和Popper：

npm i jquery bootstrap popper.js --save

我修改了我的/aurelia_project/aurelia.json文件以包含以下依赖项：

  "dependencies": [
   "jquery",
   {
     "name": "popper.js",
     "path": "../node_modules/popper.js/dist/umd",
     "main": "popper.min"
   },
   {
     "name": "bootstrap",
     "path": "../node_modules/bootstrap/dist",
     "main": "js/bootstrap.min",
     "deps": ["jquery"],
     "exports": "$",
     "resources": [
       "css/bootstrap.css"
     ]
   }
]

在我的app.ts中我有

import { PLATFORM } from 'aurelia-pal';
import { Router, RouterConfiguration } from 'aurelia-router';
import 'bootstrap';

export class App {
  public router: Router;

  public configureRouter(config: RouterConfiguration, router: Router){
    config.title = 'My second app';
    config.options.pushState = true;
    config.map([
      {  route: ['','home'], name: 'home', moduleId: PLATFORM.moduleName('routes/home/index'), nav: true, title: 'Home'},
      {  route: 'about', name: 'about', moduleId: PLATFORM.moduleName('routes/about/index'), nav:true, title: 'About'}
    ]);
     this.router = router;
  }
}

最后在我的app.html中我有：

<template>

  <require from="bootstrap/css/bootstrap.css"></require>

  <!-- Top navigation -->
  <require from="./components/top-navigation/top-navigation.html"></require>
  <top-navigation router.bind="router"></top-navigation>

  <!-- Renderpage -->
  <router-view></router-view>  

</template>

修改aurelia.json文件后，我确保停止AU并重新开始使用"au run --watch"，但我仍然会收到以下错误：

./src/app.html中的错误找不到模块：错误：无法解决＆＃39;自举/ CSS / bootstrap.css＆＃39;在＆C; \ project \ app \ src＆＃39; @ ./src/app.html @ ./src/app.ts @ ./src/main.ts @ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js @ multi 奥里利亚-的WebPack-插件/运行/空入境奥里利亚-的WebPack-插件/运行/ PAL-装载机进入奥里利亚-的WebPack-插件/运行/空入境 aurelia-webpack-plugin / runtime / pal-loader-entry aurelia-bootstrapper

Answer 1

如果其他人应该偶然发现这一点，我使用webpack解决了它。

我删除了＆＃34;依赖＆＃34;在/aurelia_project/aurelia.json下。

我删除了

 <require from="bootstrap/css/bootstrap.css"></require>

来自app.html的

，并从app.ts中删除了以下内容：

import 'bootstrap';

然后在webpack.config.js中我将const cssRules修改为（添加了postcss-loader和options，将jquery和boostrap添加到module.exports - ＆gt; entry - ＆gt; vendor并在模块规则下我将jquery全局公开）：< / p>

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' },
  { loader: 'postcss-loader',
  options: { plugins: () => [require('autoprefixer')({ browsers: ['last 2 versions']})]}}
];

module.exports = ({production, server, extractCss, coverage, analyze} = {}) => ({
  resolve: {
    extensions: ['.ts', '.js'],
    modules: [srcDir, 'node_modules'],
  },
  entry: {
    app: ['aurelia-bootstrapper'],
    vendor: ['bluebird', 'jquery', 'bootstrap'],
  },
  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: /\.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' },
      // exposes jQuery globally as $ and as jQuery:
      { test: require.resolve('jquery'), loader: 'expose-loader?$!expose-loader?jQuery' },
      // 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',
      '$': 'jquery',
      'jQuery': 'jquery',
      'window.jquery':'jquery',
      Popper: ['popper.js', 'default'] // Bootstrap 4 dependency
    }),
    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())
  ]
});

最后一步是在main.ts的顶部导入boostrap：

import 'bootstrap/dist/css/bootstrap.css';

在Aurelia-CLI中导入引导程序4会导致找不到模块

1 个答案: