Question

我是ASP.Net Core + NPM的新手。我一直在关注各种在线示例，虽然他们的屏幕截图显示它正常工作，但大多数实际上并没有工作（完整）......并且the one I am working with now并不像宣传的那样“完全”工作。

出于某种原因，Bower Packages不会自动迁移到wwwroot\lib文件夹中。通常情况下，我希望他们默认这样做......但这可能要求很多。

问：如何将 Bower Packages 自动安装到'Lib'目录中？

另外，为了以防万一，我检查并创建了Web应用程序的EMPTY VERSION＆amp;它也不会迁移 Bower Packages 。所以我想我们的期望是亲自去做。

这是我采取的步骤：
使用：Visual Studio 2017（社区版）

第1步：
创建了以下项目，添加了MVC文件夹＆amp;文件夹到WWWRoot（见下图）

ASP.NET核心Web应用程序（.NET核心）项目
添加了MVC文件夹
添加了WWWRoot文件夹
为TypeScript文件添加了文件夹

第2步：
配置TypeScript

tsconfig.json，TypeScript编译器配置文件（见下文）
typings，TypeScript类型定义文件文件（见下文）

TSCONFIG.JSON

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    "rootDir": "App",
    "outDir": "wwwroot/app"
  },
  "compileOnSave": true,
  "angularCompilerOptions": {
    "genDir": ".",
    "debug": true
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

TYPINGS.JSON

{
  "globalDependencies": {
    "jquery": "registry:dt/jquery",
    "jasmine": "registry:dt/jasmine"
  }
}

第3步：
配置NPM以引入Angular 2及其依赖项

的package.json

{
  "version": "1.0.0",
  "description": "NO404 administration panel",
  "name": "no404 backoffice",
  "readme": "no404 backoffice",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~2.2.0",
    "@angular/compiler": "~2.2.0",
    "@angular/core": "~2.2.0",
    "@angular/forms": "~2.2.0",
    "@angular/http": "~2.2.0",
    "@angular/platform-browser": "~2.2.0",
    "@angular/platform-browser-dynamic": "~2.2.0",
    "@angular/router": "~3.2.0",
    "@angular/upgrade": "~2.2.0",

    "angular-in-memory-web-api": "~0.1.15",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25",

    "bower": "1.7.9",
    "jquery": "^3.1.0"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.45",
    "concurrently": "^2.2.0",
    "gulp": ">=3.9.1",
    "gulp-concat": ">=2.5.2",
    "gulp-copy": ">=0.0.2",
    "gulp-cssmin": ">=0.1.7",
    "gulp-load-plugins": "^1.3.0",
    "gulp-rename": ">=1.2.2",
    "gulp-rimraf": ">=0.2.0",
    "gulp-tsc": ">=1.2.0",
    "gulp-uglify": ">=1.2.0",
    "gulp-watch": ">=4.3.9",
    "gulp-clean-css": "^3.0.4",
    "gulp-clean": "^0.3.2",
    "jasmine-core": "2.4.1",
    "tslint": "^3.15.1",
    "typescript": "^2.0.0",
    "typings": "^1.3.2"
  },
  "scripts": {
    "start": "concurrently \"npm run gulp\" \"npm run watch\" \"npm run tsc:w\"",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "gulp": "gulp",
    "watch": "gulp watch",
    "ngc": "ngc"
  }
}

第4步：
配置Gulp

GULP.CONFIG.JS

module.exports = function () {

    var base = {
        webroot: "./wwwroot/",
        node_modules: "./node_modules/"
    };

    var config = {
        /**
         * Files paths
         */
        angular: base.node_modules + "@angular/**/*.js",
        app: "App/**/*.*",
        appDest: base.webroot + "app",
        js: base.webroot + "js/*.js",
        jsDest: base.webroot + 'js',
        css: base.webroot + "css/*.css",
        cssDest: base.webroot + 'css',
        lib: base.webroot + "lib/",
        node_modules: base.node_modules,
        angularWebApi: base.node_modules + "angular2-in-memory-web-api/*.js",
        corejs: base.node_modules + "core-js/client/shim*.js",
        zonejs: base.node_modules + "zone.js/dist/zone*.js",
        reflectjs: base.node_modules + "reflect-metadata/Reflect*.js",
        systemjs: base.node_modules + "systemjs/dist/*.js",
        rxjs: base.node_modules + "rxjs/**/*.js",
        jasminejs: base.node_modules + "jasmine-core/lib/jasmine-core/*.*"
    };

    return config;
};

第5步：
创建Gulp任务

GULPFILE.JS

"use strict";

var gulp = require('gulp');
var config = require('./gulp.config')();
var cleanCSS = require('gulp-clean-css');
var clean = require('gulp-clean');
var rename = require('gulp-rename');
var $ = require('gulp-load-plugins')({ lazy: true });

gulp.task("clean:js", function (cb) {
    //return $.rimraf('wwwroot/js/*.min.js', cb);
    return gulp.src('wwwroot/js/*.min.js', { read: false }).pipe(clean());
});

gulp.task("clean:css", function (cb) {
    //return $.rimraf('wwwroot/css/*.min.css', cb);
    return gulp.src('wwwroot/css/*.min.css', { read: false }).pipe(clean());
});

gulp.task('minify:css', function () {
    return gulp.src(config.css)
        .pipe(cleanCSS())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest(config.cssDest));
});

gulp.task("clean", ["clean:js", "clean:css"]);
gulp.task('minify', ['minify:css']);

gulp.task("copy:angular", function () {

    return gulp.src(config.angular,
        { base: config.node_modules + "@angular/" })
        .pipe(gulp.dest(config.lib + "@angular/"));
});

gulp.task("copy:angularWebApi", function () {
    return gulp.src(config.angularWebApi,
        { base: config.node_modules })
        .pipe(gulp.dest(config.lib));
});

gulp.task("copy:corejs", function () {
    return gulp.src(config.corejs,
        { base: config.node_modules })
        .pipe(gulp.dest(config.lib));
});

gulp.task("copy:zonejs", function () {
    return gulp.src(config.zonejs,
        { base: config.node_modules })
        .pipe(gulp.dest(config.lib));
});

gulp.task("copy:reflectjs", function () {
    return gulp.src(config.reflectjs,
        { base: config.node_modules })
        .pipe(gulp.dest(config.lib));
});

gulp.task("copy:systemjs", function () {
    return gulp.src(config.systemjs,
        { base: config.node_modules })
        .pipe(gulp.dest(config.lib));
});

gulp.task("copy:rxjs", function () {
    return gulp.src(config.rxjs,
        { base: config.node_modules })
        .pipe(gulp.dest(config.lib));
});

gulp.task("copy:app", function () {
    return gulp.src(config.app)
        .pipe(gulp.dest(config.appDest));
});

gulp.task("copy:jasmine", function () {
    return gulp.src(config.jasminejs,
        { base: config.node_modules + "jasmine-core/lib" })
        .pipe(gulp.dest(config.lib));
});

gulp.task("dependencies", [
    "copy:angular",
    "copy:angularWebApi",
    "copy:corejs",
    "copy:zonejs",
    "copy:reflectjs",
    "copy:systemjs",
    "copy:rxjs",
    "copy:jasmine",
    "copy:app"
]);

gulp.task("watch", function () {
    return $.watch(config.app)
        .pipe(gulp.dest(config.appDest));
});

gulp.task("default", ["clean", 'minify', "dependencies"]);

Answer 1

对于bower，名为.bowerrc的配置文件确定已安装软件包的目标。确保此文件包含：

{
  "directory": "wwwroot/lib"
}

现在，一旦在命令行中调用bower install，就应该在./wwwroot/lib相对于您的凉亭文件的位置恢复包。

为了确保，npm与凉亭不同。他们是2个不同的包管理器，因此需要在bower.json中指定bower包（您没有截图显示）。对于npm，包在package.json

中指定

在您的步骤中，您正在使用npm。您的gulp任务应该可以正常工作，并将包从./node_modules/移动到./wwwroot/lib/。但是，最新版本的npm不允许description文件中name和package.json字段中的空格。您应该更新这些，然后尝试运行以下内容：

npm install
npm update
gulp

在ASP.Net Core Web中将文件从Bower迁移到Lib文件夹

1 个答案: