Electron with JSX - javascript

I am writing desktop app with Electron from Github, and I am using React with it. One thing I notice is that because Electron uses io.js, I no longer need webpack to build my code like when I dev for client-side web app. However, I still need something that can load JSX. I am using Babel request hook, but it seems a little slow. I don't really need the ES6 features in Babel since they are supported in io.js.
Is there another way I can use JSX with Electron?
Thanks

Webpack is actually designed with Electron development in mind. What I need to do is to to specify in the webpack.config.js file is config target: 'atom'. Webpack will know that it is packaging an Atom (now known as Electron) app, and will not attempt to bundle packages such as fs, or any modules in node_modules. With webpack, I can configure babel to my heart desire, and I also get minification.
Update
As #eduludi has mentioned, the value for target is now electron.

Related

Is it ok to refer to node_modules directly?

The project I'm currently working on (Java/JSP) currently uses no package manager to manage its JavaScript dependencies.
The used libraries are just committed under version control, and referred as such from the JSP pages...
I would like to evolve to a workflow were we would use a package manager (e.g. yarn), and later on eventually also webpack to further optimise the build.
I would like to do this in a phased approach. As I have little to none experience with such a frontend workflow, I have some questions:
Would it be weird to just start with defining the used libraries in a package.json file, and use yarn to manage to package?
yarn will then fetch the modules and store them in the node_modules folder.
Is it bad practice to refer to the scripts in that node_modules folder directly from within the JSP files?
Example
package.json:
"dependencies": {
"jquery": "^3.4.1"
}
app.jsp:
<script src="node_modules/jquery/dist/jquery.min.js"></script>
Yes, that's completely ok. It's the way we normally initialize frontend projects (probably sometimes, some higher-level script does it for us but still). Just run npm init.
Oh yes, that's quite bad. Most probably, it simply will not work. If you want to load something directly on a page, you need a cdn version.
To be honest, having a package.json is not that useful without a building tool like webpack, gulp or grunt.
UPD:
Regarding why loading things directly from node_modules might hurt:
A lot of modern JS packages (like, for instance, React) use modules that are not implemented yet in any browser or ES5+ syntax which is supported only by some browsers.
This way, you may load React directly but it will crash in any browser with something like import is not defined.
Basically, a lot of modern packages expect you to either have a building tool or use cdn version.
Honestly, I don't know how many packages let you seamlessly load things directly from node_modules.
So, in your particular situation, I'd say that if particular packages you use let you do so & are shipped with browser-compatible version, you can just go ahead & do it this way.
Nevertheless, I see it highly possible that sooner or later you will face a package that will not let you to include it this way (or worse: it will, but will crash some browsers that don't support latest JS features/introduce other nasty bugs in your app).
Hopefully, at this stage, you will already have the building tool configured.
Bonus:
Relatively recently some browsers started to support modules!
There are even tools like snowpack that do something particularly similar to what you are looking for.
Even though, you still need to be very careful with this. Direct inclusion of lodash.js, for instance, will generate 640 GETs (check out this article -> "Libraries" section).
NPM packages are meant to be run with Node, not in a browser. You would need to serve a browser-friendly version, using something like webpack or browserify.

why not install webpack globally?

I'm new to front end, just a question on webpack.
For single page application like Angular, when we use cli command ng new newproject,so the development tool webpack is automatically installed under node_modules, which means for every project I work on, there is a webpack package installed. Isn't that duplicated and take up too much disk usage? Image I have 20 Angular projects on the disk, there are also 20 duplicated webpack package as well, can't we install webpack globally so that we only have one global webpack package?
Different Webpack versions support different things and may impose different requirements on your project. If you only install it globally, then all your projects must be compatible with that version simultaneously. This may prove to be a burden, if you want to upgrade the version to support the latest features, but upgrading requires you to update your projects in some way or another since the new version has some backwards incompatible changes.
It's better to keep versioning as localised as possible to keep it manageable.
Basically, I guess this is because you want to handle the dependency to Webpack in each package (package.json).
You might want to change it for another tool like rollup or parcel in one package for example.

Setup ReactJS environment

I am new on ReactJS and learning from scratch. I see some using babel and some are webpack to configure as well some use yarn package manager. So can you suggest me which is better to work with react.
I just curious about configuring reactJS environment thorugh which bundle or package manager?
babel is a transpiler, webpack is a bundler and yarn (or npm) is a package manager. These tools are for different purposes. And usually we use all of them together.
React has a very handy tool called Create React App. With this tool you don't need to configure babel and webpack by yourself so you can start to learn React easily.
You can start working with react using create react app(along with official react documentation) which will provide you app structure with no build configuration. So there is no need to worry about babel, webpack. you will get all configured with proper documentation. It's up to you to use yarn or npm as package manager.
This is best place to start up with ReactJS
In older versions you need to setup react with babel and webpack but now on current latest version you can directly start with Create React App
ReactJS Installation and startup guide
Just follows steps on this page, then run HelloWorld example which is best programs to start with any new programming language.

Does webpack allow to run my app without building like jspm?

I was just wondering about this. Can webpack work in the browser without doing any builds, like JSPM? Or is it the same as browserify?
I looked at the official docs and found no mention of this.
It's a module bundler. So closer to Browserify. You can, however, set it up in a watch mode easily. That way it deals with the builds on the background while you develop and examine the result in the browser.

How to use webpack for development without webpack dev server?

I am currently using require.js for development so I can iterate quickly (change a file, refresh page, no build step in between), but I use webpack as a build tool since it is superior to r.js. I would like to get rid of require.js entirely and use webpack as a script loader in development. I know that's exactly what webpack dev server is for, but I specifically don't want to use it.
Ideally I would just include some kind of webpack loader in <script>, point it to my webpack.js build config, and let it do the job.
If you don't want to use webpack-dev-server, you could use webpack's watch functionality to keep building your script as you make changes. That will give you the workflow you're looking for. In the index.html, you'll be including your bundle only and no loader.
http://webpack.github.io/docs/tutorials/getting-started/#watch-mode

Categories

Resources