Build tool for vanilla JS

JavaScript
1

Hi,

I write my web apps in vanilla JS, HTML and CSS.
For my single page applications I have developed a small framework.
This framework works that way, that I give him the name of a html template file and the destination element where to load the file into. In the html file itself I can insert magic keys which then trigger the framework to load a connected CSS file and/or javascript file and replace strings by their locale translation.

This works great and I am very happy with it.

My problem is, there seems to be no build tool (webpack, gulp, parcel) which is capable to handle this kind of process because the framework must be able to load any html file, javascript file and css file dynamically and the build tools all depend on static content.

So I want to know. Is this process of my framework so special? Does it have any big disadvantage I do not see? Of course I could also load all data on app startup and then only switch the visible parts but this is not what I understood on modular development and also it makes no sense to load dozens of megabyte to the client if maybe only 1/10 of the app is used by the user.

So what is the secret to use a build tool which will bundle my app?

Thanks

Thallius

2

Hi @Thallius, well if the major part of your files is getting loaded dynamically and not part of the bundle, do you really need a module bundler after all?

That said, the most straight forward solution would be to just copy the required files to static folder (say) as part of the build process; e.g. with webpack you might have a look at the copy-webpack-plugin. Then you can just load / reference your files with JS as usual.

3

Hi

thanks for your answer.

Thats nearly what I am doing right now. I just make an archive of me git repository and upload it to the server.

What I am missing is a minimize feature for the js scripts. Also it would be nice if only the .css files were bundled and the scss files be ignored (I cannot ignore the scss files in the repository of course)

Thallius

4

Ah I see, then using aforementioned webpack plugin you can might glob patterns in combination with a transform function that would minimise the results (using the minifier of your choice)… e.g.:

const CopyPlugin = require('copy-webpack-plugin')
const minify = require('minify')

module.exports = {
  // ...
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: 'src/static/*.js',
          to: 'dist/static',
          transform: {
            transformer (content, path) {
              return minify(content)
            }
          }
        }
      ]
    })
  ]
}

I’m mostly webpack guy myself and can’t really tell about other build tools off-hand, but I’m sure there are similar solutions for these as well.

5

Thanks again

I will give webpack with the copy plugin another chance.

Will let you know how I success. But first I will go for a few days of vacation.

Thallius

6

Have a great holiday then! :-)

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.