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
Related
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
NPM donwloads a lot of files needed for the webpack/libraries. From what i understand, webpack generates a one single bundle file, that contains all code for script working. After that, when i finish building my app, do i need to keep all those jquery/react files and webpack itself? Or should i just delete them?
It's common practice to make a project portable/shareable by following these steps;
Create a package.json and ensure to capture all dependencies,devDependencies and/or peerDependencies.
Add/commit this package.json and package-lock.json files to your version control
Create a .gitignore file and add node_modules to it (in essence, this cuts out that baggage)
For production purpose (e.g. to be shared with client finished product), build the project (which often results into a small files, often within /build or dist). And then you can always push that build file to AWS or Heroku or the clients' servers.
What does the above help you achieve?
You can easily start the project using any machine, as long as you run npm install which reads from your package.json.
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.
I am new to vuejs. Recently I noticed that when I pull, it says conflict in app.js file. But I can't find the issue as app.js file is big.
Sould I add this file to gitignore file?
what is best practice to work with vue js?
I imagine you are building to a folder /dist and the app.js being conflited is the one inside of it.
You should ignore the /dist altogether. This folder is generated on the building process, meaning everyone that runs the project will update and create it.
Here is the default vue-cli .gitignore:
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
Not that not anything here may be useful to put in your own .gitignore. But you should for sure have at least node_modules and /dist.
If you are building the Vue project by scratch then I can say the following, when building/compiling your Vue project, best practices say that you should handle your entire production ready project in a dist/ or build/ directory where your main app.js file where the conflicts you are having would occur. This directory is only reserved for deploying the app and is not saved into your code repository, hence on why you should add to the .gitignore file the directory that holds such production files.
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"
}