I created an application using create react app, then I did the npm run eject command and I get a list of all dependencies. Yes, I do not have webpack config files, which will be if I create my own webpack. I see only one advantage that create react app adds extra dependencies that are not needed. All other settings, as I understand it, I can add the cra application to my own webpack. Can you please tell me why it is so important to create your own webpack? I just don't see much difference between builds. I have read a lot of articles and have not found objectively strong advantages can you tell me
I have been working with reactjs from last 7-8 months, I have always used create-react-app to get started with any react application. but, by exploring more ways to get started with a react application I came to know there is a thing called vite which is I guess is providing a faster and leaner development experience for modern web projects.
I used it once till now, not in production yet as I am not very confident about it. So, which is a better way to get a simple template for react app. which is also better in production environment. Does using any one affects in production?
CRA uses webpack to handle its core functionalities. In the development webpack repeats the bundling process every time there is a change in the code. As a result, when your source code grows larger, everything becomes sluggish. The time it takes to serve a dev server and build your projects increases significantly.
Vite only needs to pre-bundle your dependencies using esbuild the first time you start development before it begins to serve your app.
Vite doesn’t need to bundle the entire app or transpile the modules and code before starting a dev server; transpiling is done on-demand, thus making it significantly faster than CRA.
https://blog.logrocket.com/vite-3-vs-create-react-app-comparison-migration-guide/#:~:text=Vite%20and%20CRA%20are%20not,and%20which%20modules%20are%20supported.
I am trying to migrate Angular.js app to the hybrid one. The code was really old so at first I changed all the controllers to the components and I would like to introduce Webpack for Angular.js now before I will use ng-upgrade tool.
I already installed webpack, created a config file but I am looking through some tutorials and they are working with export modules. The app we are changing is quite big so is there any way I could have Webpack but without exporting angular.js modules as es6 modules? Do I need to change all dependency into the import statements?
Yes. You will have to convert all that into import statements, though it does not require ES6-Modules (we chose CommonJS modules).
When we migrated our huge AngularJS App (bower, TypeScript, global namespaces) to webpack we also necessarily had to do the step of packing everything to exported modules and migrate from bower to npm.
However, the whole change was less effort than we feared before, and we never regretted our decision. :-)
I'm starting journey with React and have a very important question for me : as I'm not familiar with Webpack can I add it later - after I finish my project? Won't it cause any problems in file structure and so on ?
You could add webpack once your project is complete, but this isn't really good practice.
Webpack allows you to work in ways which would not be possible without such a tool. Webpack does lots of things, but most of the things which it does are useful when you're developing code, not once you're done developing. If you were to do add webpack once you've finished your project, you would have set up your code in a way which doesn't take advantage of webpack.
For React, webpack makes it easy to split your components into multiple files, and it allows you to transform files containing jsx.
Webpack can be a pain to configure, but there are options to make your life easier, like create-react-app. Alternatively, parcel has a lot of the functionality of webpack, without the config.
I am updating the build process for an Angular 1.5.8 application, to allow development on Typescript.
After an over-complicated experience with Grunt, the current build process is simple and only uses Gulp and Browserify to build two bundles: my-lib.js and my-app.js. This way, the library, which is bigger, but more stable than my application code, doesn't have to compile so often and the compilation of the application-domain code only takes 0.1 sec. I am happy with that -- as well as the other developers.
Now we are looking forward to migrate to Angular 2.0 and want to start development in Typescript, but I'm not sure on how to integrate it on the build process and even the best approach on how to do it: should it be preferred to use tsc only to compile Typescript into Javascript and let Browserify handle the dependencies? Or should I use tsc as my main build tool and let it resolve dependencies, create mapping files and make the bundles?
Both Typescript and Gulp are evolving very fast and I cannot find documentation for this use on their documentations (1, 2). I would appreciate feedback from experienced people also working on the latest versions of these technologies.
Moving comments to answer:
We have doing very similar exercise at my organization, towards the end of it.
We have used webpack for most of the stuff, though webpack feels little grunt'y and after gulp, I am not a big fan of grunt.
We have used webpack to convert ts to js, bunding, minification. We have not used it yet for html to js string or css in js.
regarding the di part, you will have to worry about only js to ts. ts to js is not an issue as it is taken care by angular's string based di. regarding ts to ts, you will need to defined needed interfaces. Those will help you in moving those js to ts in future. Better to start with core components with least dependencies.
EDIT
Just to answer the part regarding the advantages of having gulp: specifically in the migration scenarios is, the upgrade is not going to happen in one go, so whatever is moved to TS should be handled by tsc and remaining by gulp.
Also gulp is much larger than just ts to js, we are still using it to create deployment package, inject js into html, fixing boostrap font paths, converting small images to base64, etc etc....
tsc has one purpose: to transpile (compile) typescript files.
gulp, on the other hand, is a build tool, which means it can run various tasks including compiling typescript, sass, minification, concatenation etc.
You can look here for an example on how to incorporate typescript and browserify using gulp: https://www.typescriptlang.org/docs/handbook/gulp.html
Another approach, is not to use gulp at all, but rather use npm scripts, you can see a sample here: https://medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8#.a7lwcmpaf
I believe the absolute simplest way to do this is to use Zwitterion. You can read this article for a quick introduction.
Zwitterion allows you to include TypeScript directly into the browser through normal script tags. All features of TypeScript are automatically available, because the code is transpiled server-side on a file-by-file basis as it is served to the client. Under the hood, it uses SystemJS to emulate the real ES module loader behavior that will be standard in all browsers. If you need this to work in production, you can create a static build with Zwitterion. All of this eschews bundling, so you'll have to decide on what your needs are for performance. Personally, I'm betting on performance not being that big of an issue with HTTP2, and I prefer the simplest of builds to the complication that webpack and all of its friends bring.
As you are moving forward with typescript, my recommendation would be to integrate any module bundler such as webpack (my favorite) Internally it will use ts loader to transpile the code. Also along with compile, you would be able to use ts lint for static code analysis (webpack would take care of it). Webpack also helps if you want to have multiple modules created. Try out yomen https://github.com/FountainJS/generator-fountain-webapp . Once scaffolded you can refer to generated gulp files. It would give you an idea about typescript integration.
The best way to do this without overengineering your gulp setup is to use the plain typescript compiler:
1. Install typescript locally(it won't conflict with your global tsc):
npm i typescript --save-dev
2. Add tsc as npm script(inside package.json).
"scripts": {
"tsc": "tsc"
}
3. Create proper tsconfig.json for your needs and put it in the same folder as package.json
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
4. Use tsc compiler directly from gulp
var child_process = require("child_process");
gulp.task("build", function(cb) {
var tsc = child_process.spawn("npm", ["-s", "run", "tsc"], {stdio: "inherit", cwd: __dirname});
tsc.on("close", function(code) {
console.log("Tsc finished with code", code);
cb();
});
});
Tip. Use https://www.npmjs.com/package/gulp-sequence and vote up :)