Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I switch from npm to yarn in my project?

I'm having an issue trying to switch to yarn from npm inside my project. I tried downloading yarn and I'm still getting npm to start my project. I need to switch because a project I'm working on needs it to be yarn so I can add a maven frontend plugin to tie my backend and frontend to gather for deployment.

enter image description here

1.
<frontend-maven-plugin.version>1.6</frontend-maven-plugin.version>
<node.version>v10.13.0</node.version>
<yarn.version>v1.12.1</yarn.version>

2.
<profiles>
    <profile>
        <id>demo</id>
        <build>
            <plugins>

                <plugin>
                    <groupId>com.github.eirslett</groupId>
                    <artifactId>frontend-maven-plugin</artifactId>
                    <version>${frontend-maven-plugin.version}</version>
                    <configuration>
                        <workingDirectory>src/js</workingDirectory>
                    </configuration>
                    <executions>
                        <execution>
                            <id>install node</id>
                            <goals>
                                <goal>install-node-and-yarn</goal>
                            </goals>
                            <configuration>
                                <nodeVersion>${node.version}</nodeVersion>
                                <yarnVersion>${yarn.version}</yarnVersion>
                            </configuration>
                        </execution>
                        <execution>
                            <id>yarn install</id>
                            <goals>
                                <goal>yarn</goal>
                            </goals>
                            <phase>generate-resources</phase>
                        </execution>
                        <execution>
                            <id>yarn test</id>
                            <goals>
                                <goal>yarn</goal>
                            </goals>
                            <phase>test</phase>
                            <configuration>
                                <arguments>test</arguments>
                                <environmentVariables>
                                    <CI>true</CI>
                                </environmentVariables>
                            </configuration>
                        </execution>
                        <execution>
                            <id>yarn build</id>
                            <goals>
                                <goal>yarn</goal>
                            </goals>
                            <phase>compile</phase>
                            <configuration>
                                <arguments>build</arguments>
                            </configuration>
                        </execution>
                    </executions>
                </plugin>
                <plugin>
                    <artifactId>maven-resources-plugin</artifactId>
                    <executions>
                        <execution>
                            <id>copy-resources</id>
                            <phase>process-classes</phase>
                            <goals>
                                <goal>copy-resources</goal>
                            </goals>
                            <configuration>
                                <outputDirectory>${basedir}/target/classes/static</outputDirectory>
                                <resources>
                                    <resource>
                                        <directory>src/js/build</directory>
                                    </resource>
                                </resources>
                            </configuration>
                        </execution>
                    </executions>
                </plugin>
            </plugins>
        </build>
    </profile>
</profiles>

Link1 https://github.com/amigoscode/spring-boot-react-fullstack/blob/app-0/course-files/profiles.txt Link2 https://github.com/eirslett/frontend-maven-plugin

like image 314
Richard Brescher Avatar asked Jul 14 '20 15:07

Richard Brescher


People also ask

Is Yarn an alternative to npm?

Yarn is a JavaScript package manager created by Facebook. Yarn stands for Yet Another Resource Negotiator. It provides similar functionalities as NPM. It is an alternative to NPM when installing, uninstalling, and managing package dependencies from the NPM registry or GitHub repositories.

How to migrate from npm to yarn?

How to Migrate From NPM to Yarn 1 Delete NPM’s Lock File#N#If you’ve ran NPM’s install command in your project, you probably have a file called... 2 Delete node_modules Folder#N#Next, we need to delete the node_modules folder if it exists. Again, this should be at the... 3 Run Yarn More ...

Why does yarn print a warning when installing a package from npm?

If you’ve ran NPM’s install command in your project, you probably have a file called package-lock.json in the root directory of your project. Yarn has its own lock file and will print out a warning if it sees NPM’s lock file in the same directory.

Why can't I use NPM shrinkwrap files in yarn?

There is no support for npm shrinkwrap files in Yarn, this is because shrinkwrap files do not have enough information in them to power the more deterministic algorithm of Yarn.

How do I add a yarn file to my project?

From the root directory of your project, run the yarn command with no arguments. Now Yarn will download your dependencies and create a new node_modules folder for your project. You should now have a new file called yarn.lock in your project directory.


Video Answer


3 Answers

It's quite simple; follow those instructions:

  1. Verify that Yarn is installed on your machine globally, else use npm install -g yarn to install it.
  2. Go to your root project directory and type yarn on your CLI; Yarn can consume the same package.json format as npm, and can install any package from the npm registry.

For more details, check the official yarn doc.

like image 141
Momo Setti Avatar answered Oct 11 '22 00:10

Momo Setti


Full simple step-by-step answer:

  1. Install yarn npm i -g yarn
  2. Go to directory where u install packages and run yarn command
  3. Yarn will init and create its yarn.lock file, now delete package-lock.json * Note
  4. In your package.json file replace in "scripts" all npm commands for yarn ** Note
  5. Run yarn dev or whatever command u use for running a yarn script => DONE

* Note: it is important you don't delete it before yarn command (as some people suggest) it can break things, for example your yarn command will not even work and it will throw error:

Error: ENOENT: no such file or directory, open './package-lock.json'

** Note: If you used

 "preinstall": "npx npm-force-resolutions",

you can remove it, yarn is taking "resolutions" by default without a need for force :)

like image 44
Sebastian Voráč Avatar answered Oct 11 '22 01:10

Sebastian Voráč


You need not to do anything to switch from npm to yarn as long as yarn is installed in your Computer. Also to install packages using yarn, you should run the command yarn rather than yarn install which is equivalent to npm install. Because yarn is nothing stand alone library. Yarn is only a new CLI client that fetches modules from the npm registry. Nothing about the registry itself will change — you’ll still be able to fetch and publish packages as normal.

For more information about yarn you should read This

like image 4
Arnab Avatar answered Oct 10 '22 23:10

Arnab