CODEWITHSUNDEEP
optimizationbuilddojoamd
Volha
Volha

Reputation: 1

How to create build from AMD dojo

Dojo is pretty new for me, I have some misunderstanding and lack of knowledge.

My application(developed by someone else) use AMD Dojo 1.8 (rather old, but lets leave it as it is). In main jsp file dojo.js which is AMD is executed when application is loading.

I want to create a build. As I understand I have create layers and using some tools generate build - dojo.js file would be created (is this right?). What should I do with it - replace existing one with it? If yes what would happen, I mean, how AMD modules would be loaded? As I read moving from AMD to non-AMD is almost not possible.

Main goal is to optimize application, force landing page to load faster.

Upvotes: 0

Views: 547

Answers (1)

soeik
soeik

Reputation: 925

Check this repository

It contains working example of configured Dojo + Webpack + TypeScript

Some key points:

You need to configure DojoWebpackPlugin:

 new DojoWebpackPlugin({
      loaderConfig: require.resolve("./src/loader-config.js"),
      locales: ["de", "en"],
      environment: {
        dojoRoot: "/",
        production: env && env.production
      }, // used at run time for non-packed resources (e.g. blank.gif)
      buildEnvironment: { dojoRoot: "node_modules", build: true } 
    })

You'll have to make your loader config to work with dojo-webpack-plugin.

loader-config.js:

function getConfig(env) {
  const loaderConfig = {
    parseOnLoad: false,
    tlmSiblingOfDojo: true,
    has: {
      "foreign-loader": true
    },
    isDebug: false,
    async: false,
    blankGif: "./assets/images/blank.gif",
    production: env.production,
    packages: [
      {
        name: "dojo",
        location: env.dojoRoot + "/dojo",
        lib: "."
      },
      {
        name: "dijit",
        location: env.dojoRoot + "/dijit",
        lib: "."
       }
     ]
  }

  if (!env.build) {
    loaderConfig.locale = dojoConfig.locale
  }

  return loaderConfig
}

//For build export function getConfig
if (typeof module !== "undefined" && module) {
  module.exports = getConfig
} else {
//To use it directly in index.html return config object
  getConfig({ dojoRoot: "/" })
}

I'm using dojo installed from npm, you can go this way as well, instead of storing dojo files in ./src folder.

In example repostiory I'm using TypeScript, so if you want to load own AMD modules from TypeScript modules you'll have to create definitions for them.

Hope this will help. If you have any questions feel free to ask in comments, I'll try to update my answer.

Upvotes: 1

Related Questions