How to use yarn instead of npm in Visual Studio React project?-CodePudding

I've created a VS 2022 project using the VS out of the box ASP.NET Core with React.js and Redux template.

When I publish the project I see in the output window it uses npm install command.

Question

How can I modify the build/publish process to use yarn build command instead of npm install?

CodePudding user response：

First, install yarn globally with npm.

npm install --global yarn

yarn --version

The installation method varies by OS depending on Windows and Mac.

Then, you can run the division that was run with npm with yarn. You can run it with 'yarn start' , 'yarn bulid', etc. without 'run' such as 'npm run start'.

npm run start

if use yarn

yarn start

CodePudding user response：

In the project's .csproj file I've changed the following lines:

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />

to:

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="yarn" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="yarn build" />

(additionaly I've changed the build process accordingly:)

<Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />

to:

<Message Importance="high" Text="Restoring dependencies using 'yarn'. This may take several minutes..." />
<Exec WorkingDirectory="$(SpaRoot)" Command="yarn" />