How to add a folder as entry in npm package? - javascript

I am trying to publish a npm module. Which has a following folder structure.
In my package.json it has "main": "./dist/" I understand this resolve for index.js. But in the dist folder I have individual files named as string.js, class.js, dom.js I am planning to import them as
import { isValidZipCode } from '#scope/utils/string'; but right now I have to import them as import { isValidZipCode } from '#scope/utils/dist/string';
Is there a way I can resolve a folder when I import a module from node_modules?
EDIT: Main idea is to import the files as import { isValidZipCode } from '#scope/utils/string' when I keep individual files for individual exports.

The other answers are correct for the most part, but I think there's one thing that's missing (either from your OG post or from their answers), which is:
Your folder structure is definitely not standard, which likely led to your current problems as well as non-helpful results in the Google searches when you tried to find an answer.
You didn't show your package.json nor your webpack.config.js file contents, which are the key to answering your question even if you did have such a weird file structure.
Some suggestions:
Change your folder structure to be something along the lines of
/
|--src
|--utils
|--string.js
|--[... other js files]
|--index.js
|--dist (will be generated automatically)
|--[config files, like package.json, webpack.config.js, etc]
Make your webpack.config.js have something along the lines of:
output: {
path: path.resolve(__dirname, 'dist'),
//...
}
plugins: [
new CopyWebpackPlugin({
patterns: [
'ReadMe.md', // optional
'package.json',
'LICENSE.md' // optional
]
})
],
In order to fix/normalize the output (e.g. output would be /dist/utils/[string.js, ...], /dist/package.json).
Then, make your package.json main something like
"main": "utils/string.js"
After doing that, your output should look something like
/
|--src
|--utils
|--string.js
|--[... other js files]
|--index.js
|--dist
|--utils
|--string.js
|--[... other js files]
|--index.js // optional: only if you want to support stuff like
// `import { isValidZip } from '#scope/utils';`
|--package.json
|--[config files, like package.json, webpack.config.js, etc]
Finally, you need to cd dist and run npm publish from inside there. (That's why you need the package.json inside that directory.)
I can't really go into details about the #scope portion since I haven't done that myself, but I did the above for one of my own projects and it worked as expected.

All you need to do is to make a index file in root folder then just export all files with the following:
In your dist/string export each method/function on it, and for the index do it follows:
export * from "./dist";
as it helps maintain code and looks cleaner to eye
Regards :)

Create a index file in root folder then just export all files like this
export { default as Str } from "./dist/string";
export { default as Cls } from "./dist/class";
export { default as Dom } from "./dist/dom";
and also update package.json change main from./dis/ to ./
Hope this will help you. Happy coding.

Related

StencilJS - How to import css/sass from node_modules?

I am trying to import a css file that has variables from a node_modules package.
I've attempted to copy from the stencil.config.ts, but it keeps dumping builds into the location I am trying to specify and can't find information for the next foot forward..
What I have right now is something like this:
type: "www",
dir: 'src/global',
copy: [
{ src: '../node_modules/package/design-tokens/dist/tokens.css', dest: 'themes' }
]
}
Right now I just need to go into the node_modules and reference a css file that has variables.
Thank you!
Have you tried to import the file directly from node modules in your global css file?
In stenil.config.ts you have
// stenil.config.ts
export const config: Config = {
globalStyle: "src/global/app.css",
....
}
In the app.css file you can import the variables from node_modules:
/*
* app.css
*/
#import '~design-tokens/dist/tokens.css';
/*
* Some other custom css here
*/
~ here refers to the node_modules folder, so then design_tokens is the package that you have installed in node_modules.
You can also look into using sass for your app.css file instead as described here: https://stenciljs.com/docs/plugins. So you would use the #stencil/sass plugin shown in the link to handle the compiling, and rename your app.css to an app.sass instead. But this shouldn't be necessary if your design tokens are CSS custom properties.

Configure custom "root" directory with "babel-plugin-module-resolver"?

Here is my project structure:
cloudRun
distApp // TRANSPILED APP FILES FROM ./src
distService // TRANSPILED BACKEND FILES FROM ./cloudRun/src
src // SOURCE FILES FOR THE BACKEND CODE
index.js // INDEX.JS FOR THE BACKEND CODE
babel.config.js // CONFIG FOR THE BABEL TRANSPILE SCRIPT
src // SOURCE FILES FOR THE APP
index.js // INDEX.JS FOR THE APP CODE
package.json // THIS IS THE MAIN PROJECT package.json
I'll try to be very succinct and clear.
In both of the index.js (app and backend code) I use path aliases in the source code.
For example:
./src/some-folder/some-file.js
import xxx from "#src/hooks/someHoot";
// IN THE TRANSPILED VERSION #src MUST BE CONVERTED TO ./cloudRun/distApp
And also, for example:
./cloudRun/src/some-folder/some-file.js
import xxx from "#src/hooks/someHoot";
// IN THE TRANSPILED VERSION #src MUST BE CONVERTED TO ./cloudRun/distApp
But somehow I'm having trouble when configuring module-resolver on babel.config.js. Either I get it to work correctly with the path aliases present on ./src (and path aliases on ./cloudRun/src are all wrong by 1 level) or vice-versa.
For example:
.cloudRun/babel.config.js
plugins = [
["module-resolver", {
"alias": {
"#src" : "./distApp",
"#hooks" : "./distApp/hooks",
}
}]
];
This works for the ./src files. But files from ./cloudRun/src are all wrong by 1 level up.
And if I change to this:
.cloudRun/babel.config.js
plugins = [
["module-resolver", {
"alias": {
"#src" : "./cloudRun/distApp",
"#hooks" : "./cloudRun/distApp/hooks",
}
}]
];
Then it works fine for the ./cloudRun/src files. But all files from ./src will be wrong by 1 level down.
I was thinking that I might fix this with the "root" option in the module-resolver config. But I couldn't make it work yet.
Maybe something like this:
.cloudRun/babel.config.js
plugins = [
["module-resolver", {
"root": ["./cloudRun"], // SET A NEW ROOT HERE
"alias": {
"#src" : "./distApp",
"#hooks" : "./distApp/hooks",
}
}]
];
I've tried many things inside the "root" config. But so far it doesn't seem to make any difference.
Here is how I run babel:
// SCRIPTS FROM ./package.json
babel src --out-dir cloudRun/distApp --config-file ./cloudRun/babel.config.js
babel cloudRun/src --out-dir cloudRun/distService --config-file ./cloudRun/babel.config.js

typescript export sub-modules without "dist" folder

I have a simple module modA:
modA/
- package.json
- dist/
- index.js
- db.js
- stuff.js
I'd like to be able to use the submodules "db" and "stuff" like this: import * as db from modA/db -- how can I do that? I have main: dist/index.js in my package.json but that doesn't set dist/ as a default for submodules, so the only way I can get it to work is import * as db from modA/dist/db (explictly including the "dist" in the import). import * as db from modA/db just gives the "Cannot find module" error.
The dist is there because I'm compiling from typescript.
In case it's important, I want this to work in node.js and browser, where I'm using webpack.
As an alternative, can I add some kind of namespace re-export code in index.js to make this work?
In order to make following import work
import * as db from 'modA/db';
In tsconfig.json add paths like below
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"modA/*": [
"dist/*"
]
}
}
}
Ref: https://indepth.dev/configuring-typescript-compiler/

Is there a way in Webpack to extract imported CSS into multiple files?

This is my folder structure:
src/yolo/block.js
src/yolo/editor.scss
src/yolo/style.scss
This is an excerpt of my webpack.config.js
module.exports = {
entry: glob.sync('src/**/block.js'),
output: { path: 'dist' },
plugins: [new MiniCssExtractPlugin()],
...
}
This is what the js file looks like:
block.js
import './editor.scss'
import './style.scss'
I expect the output to be:
dist/yolo/block.js -> es5
dist/yolo/editor.css
dist/yolo/style.css
But instead I get:
dist/yolo/block.js
dist/yolo/block.css
What Webpack does here is to compile all CSS and JS dependencies in 2 files because they are required/imported in the block.js. Importing a file means your code needs them, it would be wrong not to package them with Webpack.
If you want Webpack to compile different CSS/JS in different files you have to create another JS file that will include only one CSS file and remove the appropriate import from block.js.

Typescript doesn't resolve modules correctly after compiling to the js

I set the property paths in the tsconfig.json file, like:
"paths": {
"*": [
"*",
"src/*",
"node_modules/*"
],
"src/*": [ "./src/*" ]
},
And it gets me to be able to take some module more easy:
e.g.
- src
|- moduleA
|- utils
|- moduleB
// moduleA
import { something } from 'utils/moduleB'
but after compile I get next path in the moduleB.js:
something = require('utils/moduleB')
instead of relative path:
something = require('./utils/moduleB')
It doesn't work under Node because Node module resolution system knows nothing about utils folder.
So, how can I force tsc to use relative paths here?
Upd:
Here is the real example the one of my resulting js file:
data & utils they are the inner and not externals modules. My question is why tsc doesn't resolve them according to the baseUrl in the compiled files

Categories