如何將 Bower 遷移到 NPM 或 Yarn 以用於 .Net Core 2.0 MVC 項目

Question

我的項目是 .NET Core MVC，我在其中使用 Bower 管理 Bootstrap、jQuery 等。現在 Bower 即將消失，我如何按照 Bower 的建議將它們遷移到 NPM 或 Yarn/Webpack？

Answer 1

好吧，經過一些研究，我找到了一種適合我的方法。 這是我的步驟

通過 NPM 安裝 gulp（在 package.json 中添加以下條目）

"gulp": "^3.9.1",
   "gulp-uglify": "3.0.0",
   "gulp-concat": "2.6.1",
   "gulp-cssmin": "0.2.0",
   "rimraf": "2.6.2",
 "lodash": "4.17.4",

然后還添加其他包開發依賴項（因為我們需要遠離 bower）。 就像是

"bootstrap": "3.3.7",
    "jquery": "3.2.1",
    "jquery-validation": "1.17.0",
    "jquery-validation-unobtrusive": "3.2.6",
     "fontawesome": "4.7.2"

現在 NPM 會將所有包下載到項目根文件夾下的 node_modules - 您可以通過導航到 windows 文件夾瀏覽器或選擇在 VS 中顯示所有文件來查看它們

現在下一步是在 gulp 任務運行器中設置任務。 為此，從 web 項目下直接添加新項目添加 gulpfile.js。 添加文件后，我們必須定義將在構建時運行的 gulp taks。

Bellow 是一個示例文件，它執行 3 個任務 - 將包從節點模塊復制到 wwwroot/lib/_app 並清理/縮小 css 和 js 文件。 並且所有任務都被配置為作為構建過程運行，該過程在 VS 任務運行器下進行管理

/// <binding BeforeBuild='clean, clean:css, clean:js, min, min:css, min:js, copy-assets' Clean='clean, min:js, clean:css, copy-assets' />
"use strict";

var _ = require('lodash'),
    gulp = require("gulp"),
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify");

var paths = {
    webroot: "./wwwroot/"
};
gulp.task('copy-assets', function () {
    var assets = {
        js: [
            './node_modules/bootstrap/dist/js/bootstrap.js',
            './node_modules/jquery/dist/jquery.min.js',
            './node_modules/jquery/dist/jquery.js',
            './node_modules/jquery-validation/dist/jquery.validate.min.js',
           './node_modules/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js'


        ],
        css: ['./node_modules/bootstrap/dist/css/bootstrap.css']
    };
    _(assets).forEach(function (assets, type) {
        gulp.src(assets).pipe(gulp.dest("./wwwroot/lib/_app/" + type));
    });
});
//gulp.task("copy-assets");



paths.js = paths.webroot + "js/**/*.js";
paths.minJs = paths.webroot + "js/**/*.min.js";
paths.css = paths.webroot + "css/**/*.css";
paths.minCss = paths.webroot + "css/**/*.min.css";
paths.concatJsDest = paths.webroot + "js/site.min.js";
paths.concatCssDest = paths.webroot + "css/site.min.css";

gulp.task("clean:js", function (cb) {
    rimraf(paths.concatJsDest, cb);
});

gulp.task("clean:css", function (cb) {
    rimraf(paths.concatCssDest, cb);
});

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

gulp.task("min:js", function () {
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
        .pipe(concat(paths.concatJsDest))
        .pipe(uglify())
        .pipe(gulp.dest("."));
});

gulp.task("min:css", function () {
    return gulp.src([paths.css, "!" + paths.minCss])
        .pipe(concat(paths.concatCssDest))
        .pipe(cssmin())
        .pipe(gulp.dest("."));
});

gulp.task("min", ["min:js", "min:css"]);

這在 VS 本地工作時工作正常。 但是我們需要配置 csproj 顯示它可以在 VSTS 構建過程中工作。 這將通過在 web .csproj 中添加以下配置來完成

<Target Name="buildName" BeforeTargets="Build">
        <Exec Command="npm install" />
    <Exec Command="gulp clean" />
    <Exec Command="gulp copy-assets" />
    <Exec Command="gulp min" />
    </Target>

現在一切都很好 - 在構建過程中，所有必要的包都將被復制到 wwwroot/lib/_app 下，你可以將你的 css/js 引用指向那里，如下面的 _Layout.cshtml

<link href="~/lib/_app/css/bootstrap.css" rel="stylesheet" />

Answer 2

我使用了本文中概述的步驟，並且效果很好https://itnext.io/bower-to-yarn-migration-simple-steps-2a5ad0c43281

步驟 1 — 安裝紗線

npm i yarn -g

使用上述命令全局安裝紗線，然后通過運行 yarn -v 命令驗證安裝。

第 2 步 — 安裝 bower-away

npm i bower-away -g

我們還需要全局安裝 bower-away 包，然后導航到您的項目目錄並運行以下命令

涼亭

此步驟將檢查 bower.json 並將 bower_components 移動到 package.json 文件並准備好供用戶預覽。

第 3 步 — 預覽更改

涼亭--diff

第 4 步 — 應用更改

涼亭——申請

現在使用上述命令應用更改，然后我們需要從我們的項目中刪除 bower_components 文件夾。

對於 Mac/Linux — rm -rf client\\bower_components

對於 Windows — Remove-Item -Path .\\client\\bower_components\\ -Force

步驟 5 — 安裝新模塊

紗

在運行最后一個 yarn 命令之前：
值得一提的是，文章沒有告訴你，如果使用 for .net MVC 項目在與 package.json 文件相同的目錄中創建一個 .yarnrc 文件，然后將其添加到 .yarnrc 文件中以安裝包到 wwwroot 文件夾：

--modules-folder wwwroot/lib