Question

我的项目是.Net核心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",

然后还添加其他包dev开发依赖项（因为我们需要远离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 task runner中设置任务。为此，添加gulpfile.js直接在web项目下添加新项目。一旦添加了文件，我们就可以定义将在构建时运行的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 ref指向下面的_Layout.cshtml

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

Answer 2

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

STEP 1 —安装纱线

npm我用纱-g

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

STEP 2 —安装凉亭

npm我无所适从-g

我们还需要全局安装bower-away软件包，然后导航到您的项目目录并运行以下命令

威风

此步骤将检查bower.json并将bower_components移至package.json文件并准备供用户预览。

步骤3 —预览更改

bower-away --diff

步骤4STE－应用更改

bower-away --apply

现在使用上述命令应用更改，然后我们需要从项目中删除bower_components文件夹。

对于Mac / Linux，rm -rf客户端\ bower_components

对于Windows-删除项-Path。\ client \ bower_components \ -Force

STEP 5 —安装新模块

纱线

在运行最后一个yarn命令之前：
值得一提的是，本文没有告诉您，如果用于.net MVC项目，请在与package.json文件相同的目录中创建一个.yarnrc文件，然后将其添加到.yarnrc文件中以安装软件包到wwwroot文件夹：

--modules-folder wwwroot/lib

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

2 个答案: