Develop Reference

Get installed package root path from within package

I am building an npm package which is basically an CLI tool.
It is intended to be installed globally and used as CLI with dist/clj.js, but can also be installed as a regular dependency and accessed via dist/index.js.
From inside .js files of my package (like dist/cli.js or dist/index.js) I want to get an absolute path to the root of my package (where package.json is located).
I know this can be done with __dirname but for different files in my project it require different actions:
// dist/cli.js
console.log(require('path').join(__dirname, '..'));
// dist/a/b/c/foo.js
console.log(require('path').join(__dirname, '..', '..', '..', '..'));
Is there a better way to get the root of both globally or locally installed package from any .js file inside this package regardless of the folder this package is used in?

This code seems to work from any file within package:
const path = require('path');
let packageRootPath = path.join(path.dirname(require.main.filename), '..');
.. in the end needed to jump from src/dist to the root since all my js files are located in src/dist forders.

Public path issue with webpack chunk name dynamic imports

Im importing the vue app if a specific class name exists. So basically its dynamically importing. Below is the code for webpackChunk. In home.js file I check if element exists and dynamically load it.
if (elementExists) { import(/* webpackChunkName: "vue" */ '../vue/main.js') }
In the production build, I get vue.js and vendor~vue.js which is refered in the home.js file for dynamically loading it in production build. But the path for these 2 files gives me 404 error. So basically the path seems to be an issue. In webpack config I have specified the chunkFileName as
chunkFilename: 'scripts/[name].js',
Can someone suggest how to solve the path issue in prod

How can I set production build path in vue-cli?

I'm using the vue-cli tool to develop vuejs apps, and I'm developing a server too, so i want to build the /dist folder in my server to send it to the browser as static, but I don't even know where the /dist folder is.
There is a webpack.prod.config.js file (I think is the webpack config for production) and in the path-output field I tried to wirte the path but didn't work.

/dist is just a default setting by VueJS. If you want to modify this : as the documentation from VueJS states :
Always use outputDir instead of modifying webpack output.path.
Create a vue.config.js as an optional config file that will be automatically loaded by #vue/cli-service if it's present in your project root (next to package.json).
The file should export an object containing options:
// vue.config.js
module.exports = {
// options...
}
As otheres already stated in the comments, use outputDir to specify the directory where the production build files will be generated in when running vue-cli-service build. Note the target directory will be removed before building (this behavior can be disabled by passing --no-clean when building).
// vue.config.js
module.exports = {
outputDir : ''
}

How do I require something in root project directory from inside node package library?

I wanna create a node package modules, but I have difficulty to require a file from root project directory to use inside my node package module I created.
If I have directory structure like this
- node_modules
- library_name
- lib
- index.js
- bin
- run.sh
- config.js
If the run.sh called, it will run index.js. Inside index.js, how do I resolve to root directory which later I can require config.js inside index.js?

Package binary can accept configuration path explicitly as an argument.
If package binary doesn't run as NPM script, it shouldn't rely on parent project structure.
If package binary runs via NPM script:
"scripts": {
"foo": "library_name"
}
This will set current working directory to project root, so it could be required as:
const config = require(path.join(process.cwd(), 'config'));
Both approaches can be combined; this is often used to provide configuration files with default locations to third-party CLI (Mocha, etc).

If you're in index.js and config.js is in the directory above node_modules in your diagram, then you can build a path to config.js like this:
const path = require('path');
let configFilename = path.join(__dirname, "../../../", "config.js");
__dirname is the directory that index.js is in.
The first ../ takes you up to the library_name directory.
The second ../ takes you up to the node_modules directory.
The third ../ takes you up to the parent of node_modules (what you call project root) where config.js appears to be.
If you really want your module to be independent of how it is installed or how NPM might change in the future, then you need to somehow pass in the location of the config file in any number of ways:
By making sure the current working directory is set to the project root so you can use process.cwd() to get access to the config file.
By setting an environment variable to the root directory when starting your project.
By passing the root directory in to a module constructor function.
By loading and passing the config object itself in to a module constructor function.

I create module same your module.
And I call const config = require('../config'), it work.

How is import assets from './assets' resolved in React Starter Kit

In the server.js the assets are imported like this
import assets from './assets';
If I understood it correctly this path maps to build/public/assets which is generated through the webpack configuration here:
output: {
path: path.resolve(__dirname, '../build/public/assets'),
publicPath: '/assets/',
sourcePrefix: ' ',
pathinfo: isVerbose,
},
Or am I mistaken on that? When I run webpack I still run into:
ERROR in ./src/server.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./assets
Basically the question here is not how to get it run, but why can the line import assets from './assets'; in the React Starter Kit be resolved even though there is no assets.js inside src.

you need to build the project first:
npm run build
this creates the build folder with the assets.js file in it.

Check out the webpack.config.js file in the /tools folder.
It's using assets-webpack-plugin to bundle assets into namespaced client and vender modules.
After running npm run build, webpack outputs the resulting builds to the build/public/assets folder. Since the src/server.js is referencing ./assets as a relative, not fixed path, it will work once it's bundled and you run server.js from the build/public dir.
This ReadMe is also helpful: Build Automation Tools.