I am building a typescript/javascript package that will contain several JSON files. I do not want those JSON files included in the bundle that webpack outputs. I do want those files included in the output folder of the bundled javascript (copied from the node_module directory). This would be similar to including images.
I would like to create directives that explain to webpack what to do vs writing documentation in hopes that somebody reads it and does it correctly.
I know that copy-webpack-plugin will do what I need to do, but not sure how to set up this directive.
Is it even possible?
So
MyPackage has JSON files
Another developer uses my npm-package
Developer uses web pack in their project
Developers webpack bundles the javascript, excludes my JSON files from the bundle, but copies them to the output directory.
Figured it out within the package.json
Create a folder called bin (whatever) on the same level as src.
Copy the contents that need to be included in the package but not compiled or bundled into javascript, such as json files.
Update package.json add the following entry
"files": [
"bin"
],
Now when publishing, the npm package will contain the bin directory. When building within your project using webpack it will recognize this and include those files in the webpack build and deploy as part of the deployment but not in the javascript bundle.
Then from there, your javascript should reference the files similar to reading a file whether it be on the server or client sie.
Related
I am analyzing the source code of NodeJs/node to get the typed-ast of each .js files in the source code. However, to achieve this, I need a package.json file to see what libraries it depends on. However the NodeJs/node doesn't contain a package.json file. How should I generate a package.json file or find all the library dependencies for the famous project NodeJs/node? Thank you!
Project meteor also doesn't contain any package.json file, but it contains scripts/dev-bundle-tool-package.js and scripts/dev-bundle-server-package.js files, from which we can easily generate a package.json file. But I haven't seen anything like that in NodeJs/node.
I have a project created by vue-cli3. Now I have some files that I use during development, but I don't need them in a production environment.
eg:
I put a file named test.html into /public, and I could access it using http://localhost:8080/test.html (assume project running at http://localhost:8080). When I generate a production version, I don't want this file got included in /dist(default output dir).
All files under /public will be copyed to /dist/static, but it is not the result I expect.
How can I do to get access some files when developing but don't get them involved in production?
I want to reverse or unbundle a bundle.js.
Currently I am loading the bundle.js in my browser (Chrome)
Chrome detects the sourcemap and shows me a nice structure of the
full application based on the bundle. The application is bundled
using webpack and is a flux react application.
Is there a way to generate all these files out of the bundle so I can
easily browse the bundle based on the application structure?
This is for a reverse engineering project to get the application source from
an existing bundle.
So in chrome I can nicely browse the whole application using devtools sources.
and see all the individual files. But I would like to create that exact
same structure on my local drive.
I was trying a tool like debundle But I cannot find a way to add the sourcemap to this conversion?
So can I easily unbundle an existing bundle.js if:
Sourcemap is available
Chrome can easily show me the structure and individual files
Bundle is not minified or scrambled.
Bundle is created using webpack
I found shuji to be a good option - you just provide the path to the sourcemap to it. It unbundled an example bundle I made with babel and webpack perfectly. It doesn't preserve folder structure though, all of the files just end up in one folder.
My application is using JSPM and SystemJS for module loading and is using angular.
My config.js file has angular map like:
"angular": "github:angular/bower-angular#1.5.8"
So when I do import angular from 'angular', I am getting the angular.js file from the Path specified in config.js file. That's good.
Now the requirement is I want to use minified third party javascript files (angular.min.js) in the app. But there is no minified files in jspm registry
So the initial loading time of my application is high because of so many large files e.g. angular.js, browser.js etc. that takes too much time to load.
I know, I can do a jspm bundle to minify all dependency files recursively which includes vendors' files also. But my questions are:
1 - Is it possible to use vendor's minified file (angular.min.js) directly with JSPM? It is good to use vendor's minified file rather than minifying them ourshelves, Isn't it?
2 - If above one is not possible, then how can I bundle only my application specific files and still able to use (bundle separately) minified angular.js file?
What is the recommended approach here?
In your config.js file you can map any file with a name and have it imported by SystemJs in the browser
So you could potentially do something like
"angular": "jspm_packages/...../angular.min" (The path to your file)
However the recommended approach would be to bundle and minify all your vendor files and as you mentioned, bundle your application specific files separately
You can do this with something like Gulp or Grunt to generate the 2 files
There are lots of examples online of how to do this but here is one to get you started
https://blog.dmbcllc.com/using-gulp-to-bundle-minify-and-cache-bust/
Once you have generated both files you add them to your html page via a script tag
<script src="Your File Path"></script>
Option 2 is the preferred approach and I would recommend spending the time to get setup as you only have to do it one time to get your head around it
As the title says, I'm currently trying to set up my project so that the optimizer can run on it.
I'm looking to support a multi-page shim style configuration. That is: A common script, with sibling scripts that will be loaded dynamically at runtime.
My project is also making use of dependencies installed via bower which are set to go into the vendor directory. There is also a node_modules directory, although it does not contain anything for the client and should be completely ignored.
Here's the structure I have so far:
/
node_modules/
vendor/
some-code/
a-script.js
more-code/
another-script.js
common.js
main.js
runtime.js
build.js
Really all I'd like as a result of this process are two files in my build destination corresponding to main.js and runtime.js. Where the compiled main would be initially loaded and the compiled runtime might be loaded at runtime but only contains dependencies that are new to the graph.
Questions & Issues:
If my common.js shims scripts from vendor is there anything about my directory structure that might present a problem during an r.js build?
I noticed that when running r.js, it tries to minify everything in node_modules, which is wrong as I don't want it touching anything in node_modules.
r.js also seems to be minifying everything in vendor which seems wrong. Shouldn't it assemble all the files and then minify them after without touching the originals found in the vendor directory?
After being built, my dist directory ends up containing a full copy of my full project and directory structure with all .js files minified. I was under the impression that all it would contain is at most, two .js files with everything inlined? Is this possible?
Here's my build.js/build.json file:
{
"mainConfigFile": "common.js",
"dir": "dist",
"modules": [
{
"name": "main"
},
{
"name": "runtime",
"exclude": [
"common"
]
}
]
}
Your directory structure looks fine, though it is common practice to put everything you're working on into a source directory and then build (using gulp or grunt) into a build directory.
That is the correct behavior r.js. It will copy everything you've required (including node modules) into a single build file. This is better for performance because you'll only be making a single HTTP request instead of a bajillion for all of your node modules. It doesn't modify anything in node_modules
Nope, that's correct, same as above.
I don't think it's possible to selectively build some files and asynchronously load the rest. I don't know why'd you want to do that though, as it could cause a pretty big performance hit.
By the way, the community seems to be moving away from require.js and towards browserify. You might want to check it out.