如何将 Bower 迁移到 .Net Core 2.0 MVC 项目的 NPM 或 Yarn

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 纱线 -g

使用上述命令全局安装yarn，然后运行yarn -v 命令验证安装。

第 2 步 — 安装凉亭

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