I have made a website with Vue.js and i have npm run build it. After that it will create a dist folder that contain your CSS, image, JavaScript, index.html and so on. But now i have lost my project folder and have only the dist folder.
How can i convert it back to before i have use npm run build ?
You can't. It's like trying to split a cake back to ingredients.
I mean you can if you have connected it to git and just undo changes from source control
Related
I'm trying to create my first cra-template on NPM and for some weird reason when I try my template locally using the file:./cra-template-[mytemplate] everything copy overs without problem. When I publish it and try using the npx create-react-app my-project --template [mytemplate] all files are being installed but not folder structure. What am I doing wrong?
My Folder structure goes like that :
template
|
|--src
|
|--api
|--components
ect..
Thank you for the help
Ok so I figured it out. You need to actually put a file inside the folder, .gitkeep as an example. If you don’t github is not going to create an empty folder and so when you are going to pull your template all files are going to be there but no folder.
I'm trying to use the new Blazor Javascript isolation feature. I'm importing my own JS file as per the example ExampleJsInterop.cs. It works until I try to import an NPM module from within my script. In my package.json I have set up a dependency on interactjs, and in my script I have added import interact from 'interactjs'; at the top.
I'm getting a Failed to resolve module specifier "interactjs" error. I'm not sure how to get past that.
Previously I was using Webpack to bundle my script and dependencies together into a single file that is added into my index.html as a tag. This was working fine, but I'm not sure how to continue using NPM packages with JS isolation.
Thanks!
A bit late, but I've just finished solving a similar issue.
The npm files are installed to the hidden node_modules folder. This isn't available to your script when you are running your app, unless you do something to make it available. however, even if you copied the interactjs file into your scripts folder it would still not work if it was an npm file. Those are meant to run in nodejs not a browser. So you would still need to use your bundler. I tried webpack, but had some issues with certain files so ended up with snowpack instead. I just finished a bunch of articles on javascript interop - part 4 deals with npm
I forgot that I left this question open for almost a year!
I ended up solving it using Snowpack to bundle the NPM package into the Blazor wwwroot folder. Credit goes to this article for pointing me in the right direction: https://nbarraud.github.io/js-in-blazor.html
I am using Vue 2 (doesn't really matter which version exactly).
I want to test some things that happen behind the hood in Vue. So I decided to add console.log('test123') in Vue's files in node_modules. It turns out that the console log never fires. I put that in all files of Vue in node_modules, even in all files of dist's folder of Vue.
How can I achieve this ? If I fork the repo, then I'd have to upload new versions each time on my repo and then run npm install. I know that will work but wanted to achieve this without forking.
Any ideas what I am missing ?
there are many ways .. but i feel more comfortable using this method :
you can download any npm package in a seperated folder next to your project...
open the folder of the package then run this in the terminal:
npm link
then open the project folder and run
npm link ../package-path # link the dir of your dependency
References
npm-link
How to test an npm package locally
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.
Can I create the navigation-skeleton project using aurelia-cli (v 1.0)?
When I copy the skeleton (also v 1.0) into a folder and then run
au start --watch
I get an error
Cannot read property 'getTaskMetada' of null
I've also tried using the cli to create a new project first, then copying the skeleton over the resulting folder structure - no go.
I'm excited by Aurelia, but still low on the learning curve.
No you cannot. At least the way you are approaching it. The Aurelia-CLI uses requireJS and npm as opposed to JSPM and SystemJS. If you would like, simply run au new from the CLI and follow the project setup and choose yes for install dependencies. You should then be able to copy over the skeletons CSS JS and HTML and mimic the file structure in your new cli project. Once you have paths correct for css and everything it should run just fine. You will see that aurelia.json is the new config.json from the skeletons. Do your bundling and referencing there.
Refer to this on how to properly configure libraries for bundling in aurelia.json and how to refrence css with <require> tags in cli projects.
It sort of is possible using generators like this:
au new # (Select 2 or 3 with typescript)
npm install #generator/skeleton-navigation -D
au generate skeleton-navigation
au run --watch
I get a lot of gulp errors about duplicate identifiers but the app does run.
Be aware though that this generator will overwrite your source code!
Source: https://github.com/aurelia/cli/issues/477