模块加载在没有Node的Apache环境中响应组件

Question

I am currently working on adding a React based section to a website. The data needed to update in real-time without complicating the code with the likes of jQuery. I landed on using React with a pub/sub system to retrieve updates using Node and Socket.io, however, Node is only being used for updating data. The React pages are not be accessed by Node, but rather by Apache. I am including React, ReactDOM, and a standalone version of Babel in the development version.

So, my question is how can I go about separating out my React components into .js files and requiring them like in Node?

I looked into RequireJS and Browserify, but they didn't quite seem to get the job done. I need a way that I can edit and include them separate in the dev environment, but they need to be concated and minified on live automagically. Our build process already uses Jenkins, so if a solution was available that could hook into Jenkins, that would be optimal.

Answer 1

I would recommend bundling your JavaScript code using webpack , a Node.js based build tool that lets you concatenate and minify your code easily. You create a webpack.config.js file in your projects root and run it on your Jenkins build agent using node webpack .

Answer 2

As Patrick Hund already recommended, you should use a module bundler. There are several options, but I use - like Patrick Hund - webpack .

What does webpack actually do?

It loads all the files that you specify - which are mostly files required in your project - and bundles them into one file.

How is it to be used?

You need a config file where you specify mainly three things:

• The entry file (the root of your hierarchy)
• The output files (the bundled file)
• The loaders of the files required in your system to work.

You can also specify plugins, to enable for example Hot Module Replacement, to start a dashboard of the bundling process, etc.. But that is not mandatory and to start maybe you don't need this.

Too much?

Now you may think that this is too much work for development if you have to constantly rebundle all your files on every change. But it comes with some prebuilt scripts that include a watch option which does this for you and more comfortable the Hot Module Replacement which updates your browser on every change without you even have to refresh it.

For production environments you can create another config file in which you leave just what you want (eg Hot Module Replacement is not recommended for production) and that's it.

So it all falls down to these config files. You can have a look at this one , which was the one I used to understand as it was minified to what I just told you.

To integrate it to your project, you need to match the file of your index.html in which you load your js scripts and your output files and for development purposes you may want to use a dev server, which it can be the webpack-dev-server .