yeoman: automatically install npm modules - yeoman

I've created a yeoman generator.
Once I've created a project scaffold using my generator, I run the command "npm install grunt-contrib-watch grunt-contrib-connect"
I've been following the doc here: http://yeoman.io/generators.html
It seems to indicate that npm dependencies can be installed automatically. But I can't quiet figure out how to make this happen.
So, how do I define npm depencies in my generator, so that the node modules get installed automatically when the scaffold gets created?

You can generate a package.json as part of your scaffolding just as any other file. It can even contain template markup, as in generator-webapp.
If you scaffold out a package.json in the root directory of your generated project, you can run installDependencies() of the generator object at the end:
this.on('end', function () {
this.installDependencies();
});
This will take care of installing bower and npm dependencies that the project declares.

Related

Unable to Transpile Specific Third-Party node_modules Scripts Using Webpacker

I'm working with a Rails application, using Webpacker to bundle assets. I'm using a particular library I've installed via yarn whose code needs to be transpiled in my project. I'm trying to do this by modifying the paths that are ignored by Webpack/babel-loader within my config/webpack/environment.js file.
const { environment } = require('#rails/webpacker');
// Ignore all node_modules packages EXCEPT `a-random-third-party-package`:
babelLoader.exclude = /node_modules\/(?!(a-random-third-party-package))/;
module.exports = environment;
This is NOT working, though. For example, the JavaScript classes and static properties that exist in the third party package aren't transpiled at all in my bundle. But when I copy that same code into my own JS files, it's transpiled as expected.
How can I get this package to transpile like I want?
Solved! I had been using yarn link to work with this package separately and test it within this Rails application. For whatever reason, this was interfering with the build step, preventing it from being properly transpiled.
If you run into this yourself, verify that none of your dependencies are yarn link-ed, and if they are, run yarn unlink so you can locally test Webpacker without issues.

How to build a new matching node environment using just a package-lock.json (no package.json) in docker

I'm not writing a node module or publishing, just wanting to use https://github.com/dataverity/chromehtml2pdf which is just a wrapper around google chrome puppeteer.
I have a working docker container which produced the package-lock.json and now I want to build another using the same versions of all the node tree. I am using npm 6.9.0.
If I try to use npm ci it complains about not having a package.json file. I create one with just a name and version, and it tells me 0 packages added.
I try using npm install and it replaces my package-lock.json with one just referring to my package.
Running npm init --y also seems to ignore the lock file despite some SO comments suggesting it should use the lock file to construct the tree.
How can I use the package-lock.json file to construct a matching node environment in docker?
UPDATE:
what a mess: see https://github.com/zkat/cipm/issues/61 and
https://github.com/npm/npm/issues/17979
it would seem that this area is a minefield. I see references to a separate barely-documented tool called cipm, but this may have been partially absorbed into npm ci but this is woefully documented.
Tried installing and running with a bare package.json but got error which is presumably from cipm as it's not in the package-lock.json file: Cannot find module 'validate-npm-package-name'

What is the proper way to serve frontend dependencies managed by Yarn?

With bower, we were able to specify the dependency folder location through .bowerrc, but there doesn't seem to be a way to do this with Yarn. Yarn appears to force the node_modules folder to be at the same level as package.json.
Say I keep my web application's static files in app/resources/static/. I'd like to serve some frontend assets out of here; which are managed by Yarn. I see two ways of doing this, but don't like either one:
1: Init the Yarn package in app/resources/static/. This works, but it also means that package.json will also be visible. No beuno.
2: Init Yarn package in app/, and symlink app/node_modules to app/resources/static. This works, but I'd rather not have this extra step for version control reasons.
What's the best way of doing this? Thanks in advance.
UPDATE: Found a near-solution in this thread: How to change Yarn default packages directory?
You can add --install.modules-folder "./resources" to a .yarnrc file
This works on yarn install, but yarn add packagename will still write the dependency to ./node_modules.

What is the best practice for maintenance module dependencies on yeoman generator

I create a yeoman generator to help myself with front end development.
The problem is, our development environment, framework, plugins are changing so fast...
I have to update dependencies in the package.json in yeoman generator's template directory.
But, usually the package.json in yeoman generator is renamed like _package.json, because of the generator, so I cannot do just npm update.
So, I'll ask you what is the best way to update node modules in _package.json.
Thanks.
For what it's worth, npm update just update dependencies to the latest version matching your package.json dependencies semver ranger. It won't update the file itself.
To know which dependencies are outdated, you can either use npm outdated or a tool like david.
What I usually do with my project is to run one of these tools on a newly generated project. This might not seems ideal, but it's actually the best way to go because:
You ensure your generator is still working (things can break overtime if we're not careful)
You'll be able to test the new versions against your project and see where you need to fix your code so it work with latest release and breaking changes.
Also, npm using semver to set versions, this mean you only need to bump dependencies when a new major version is released. This tends to not happen all that often.
#Simon
Thank you for mention that I misunderstood the behavior of npm update.
Now I do the following step to update _package.json in generator.
create project from the generator yo generator-name
update package.json use npm-check-update.
ensure everything goes ok.
copy package.json into _package.json in generator
But I want to do this like
automatically update package.json in generator
start new project
ensure everything goes ok
I'm not sure this is the best way though...

How do I make yeoman reload bla.html instead of index.html

When a change is made to any html file in the root, yeoman fires the reload task, but, yeoman does it only to http://localhost:3501/index.html.
How do I let yeoman know that I wanna reload http://localhost:3501/bla.html ?
Maybe some Gruntgile.js configurations?
Yeoman 1.0 does this with no problems, it's pretty easy to install. Here is a quick guide:
Make sure that you have Node installed with NPM
Uninstall the old version of Grunt
Install the requirements with NPM like this: npm install -g yo grunt-cli bower
You now have everything you need, you can run yo to confirm that you have the correct version installed.
There is a lot less dependencies, they are moved to a per-project-basic.
You can read a lot more on their website here http://yeoman.io
Make sure that you read the migration guide.
Note: Their wiki says that it does not work on Windows, this is not the case anymore, I run Windows 7 and it works like charm.

Resources