I am building a npm module, in which I want to include two directories : /dist and /demo.
So far, my approach was to use the 'files' attribute, in package.json :
"files": [
"dist",
"demo"
]
When running npm pack, the tgz files successfully contains the demo folder, and the built files in /dist.
However, during the build phase, I added a shell script that is copying some files (generated mylib.js and mylib.css) to the /demo directory. And my problem is that npm pack does not care about these specific files, which are not included in the tgz (despite I can see them in my explorer).
However, if the shell script make changes to the content of /demo/index.html, these changes are included in the tgz.
How could I include the missing files?
Seems that I misinterpretated the problem:
if the files were not in the tgz, it is because I add a .gitignore in /demo, ignoring js and css files.
As I really don't want this files to be commited, the solution was to add a .npmignore file, with no rule matching css/js
Related
while vs code extension development, there is /out folder which keep generated js files for respective typescript file but committing these files in remote repo seems not useful so adding the entry in .gitignore but now when I run the extension it say module not found
Activating extension 'xkeshav.<extension-name>' failed: Cannot find module 'd:\Developer\extension-folder\out\extension.js'
Require stack:
- c:\Users\User\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js
- c:\Users\User\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-amd.js
- c:\Users\User\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-fork.js
- .
so my question is
when not keeping /out entry in .gitignore, it works file so whether we need to commit these files in remote or not ?
Make sure you have a .vscodeignore file in your repo. VS Code only uses .gitignore if there's no .vscodeignore. The .vscodeignore file is then used to exclude files/folders from the extension bundle instead of .gitignore. A typical .vscodeignore looks like this:
.vscode/**
.vscode-test/**
out/test/**
test/**
src/**
images/**
**/*.map
.gitignore
.eslintignore
.eslintrc.json
tsconfig.json
typings/**
As you see out/ itself is not excluded, just the tests which end up there.
I have an npm project for generating packages. It contains a folder called templates. The files in templates are not required by the entry point index.js instead they are collected using fs. They are not appearing in the published version. I have tried adding files: ["templates"] to the package.json (and various combinations ("templates/*", "templates/**/*", "templates/something/somefile.js") but the files are never included. The only files in templates folder that appear are Licence and package.json.
How do I make npm include these files in the published version?
Edit: My project directory has a .gitignore file but that does not include the templates folder. It does not have an .npmignore file.
The reason that the License and package.json files are appearing in your templates folder, is because npm ignores any attempt to exclude these files.
I would check that you don’t have any .ignore files in your templates folder and also check further up the filesystem, does the folder that contains your project have one? What about it’s parent and so on?
Then try temporarily removing the .gitignore file as well.
Lastly try publishing from another machine if nothing else works.
When I build my Vue project with npm run build, I would like to choose particular Vue files to be (re)compiled into the dist folder. My idea was by changing the configurations in webpack or the webpack-chain to compile from a specific entry point. An example of my goal would be:
Let's assume I have 2 components; A.vue and B.vue (and ofcourse the default files like index.html etc.)
Then I build the project, which gives me a ./dist folder with everything compiled. Then after I make changes to B.vue (and change the config file most likely), I only want B.vue to be recompiled into the ./dist folder. I already use dynamic imports so that A.vue and B.vue are different bundles, so that other files should not have to be changed.
Can I select a specific file to be compiled only?
(I am aware that the dist folder gets emptied after building, but that I will try to fix later if this could be possible)
I think you're looking for watch mode: npm run build --watch
Presentation:
I built an admin template (css + js) and I uploaded it to npm. The package contains the compiled css/js files in the "dist" folder, and the scss files in the "build" folder. The package has several dependencies which are listed as devDependencies in the package.json:
"devDependencies": {
"datatables.net": "^1.10.19",
"dropzone": "^5.5.1",
"laravel-mix": "^4.0.13",
...
}
There are no dependencies, which I assume is correct because I directly use the compiled css/js (the js is just jQuery code).
There's an admin.scss file which has all the imports:
#import 'abstracts/variables';
#import
'~datatables.net-bs4/css/dataTables.bootstrap4.min.css',
'~easymde/dist/easymde.min.css',
'~flatpickr/dist/flatpickr.min.css',
'~jasny-bootstrap/dist/css/jasny-bootstrap.min.css',
'~selectizebootstrap/dist/css/selectize.bootstrap4.css';
#import
'components/alerts',
'components/cards';
I'm using the admin package in a PHP project (Laravel). The admin package is included in the devDependencies of my PHP project. The admin.css file is included in the php.scss file:
#import '../../node_modules/admin-template/dist/css/admin.css';
The problem:
I need to change some variables of the admin.scss file. So, instead of include the compiled css I need to include the scss:
#import '../../node_modules/admin-template/build/scss/admin';
If I do that, I get errors because the admin template devDependencies are not installed in my node_modules.
If do a npm install within the admin template folder, a node_modules folder is created and all the dependencies are installed inside that folder.
But the errors doens't go away, I think is because of the tilde used in the imports of the scss file: #import '~datatables.net-bs4/css/dataTables.bootstrap4.min.css'. It's looking for the files in the root folder (not within the package).
What should I do?
Add all the admin template devDependencies as devDependencies of my PHP project? Doesn't seems right.
List the admin template devDependencies as dependencies, so when I install the package, all the dependencies get installed too? Doesn't seems right either, those are devDependencies.
Remove the tilde ~ off all the #imports in the admin.scss file? So if I need to include directly the scss I need to do an npm install within the package. And if I already have some of that packages installed in my node_modules, they'll be twice.
Any other options?
Short answer, also put them into "optionalDependencies" field of admin-template/package.json.
This way, when you:
cd php-project
npm install admin-template
# or simply `npm install` if it's already in "dependencies"
"optionalDependencies" of admin-template, like datatables.net-bs4 will be installed into top-level node_modules folder. Plus, "optionalDependencies", the semantic seems pretty damn right to me.
Now if you really care about the install footprint for users who only use .css in your package, then unfortunately, no easy way to do it.
You inevitably require users of .scss to do some extra work. You either provide a guide for them on how to do it manually, or you can provide a script to automate that.
One possible solution is you also provide a bin file.
admin-template/bin/admin-template-enable-sass.js # or .sh if you prefer
// package.json
{
"bin": "bin/admin-template-enable-sass.js"
}
This way, when user npm install admin-template, that bin file is symlinked to top-level node_module/.bin, making it runnable with npx cli command.
Now your .scss advance user can simply type:
npx admin-template-enable-sass
to let your script take care things for them.
Is there a way for gulp-less (or some other tool) to take the paths to images that are referenced in the .less/.css file and put the files to the destination folder?
Right now when I install a node module, I #import the css file from /node_modules/... directory to my main .less file and it will be included in the bundle, but the images that come with the module are still located under /node_modules/... folder which I don't plan to deploy so using a relative URL would be pointless.
You should consider using bower to split your dev dependencies (handled by npm, non-deployed stuff) and front-end libs (handled by bower, deployed stuff).
Using a .bowerrc like this, you can tell where to save the libs in you projects structure:
{
"directory": "./<your-public-folder>/libs"
}