Compile a several page (HBS & JS) when building app using GRUNT, GRUNT-BROWSERIFY

Questions Build Issues
1

There is sign-in route in my project and I need to compile the route like a several file/s

  • app
    • routes
      • sign-in.js
    • templates
      • sign-in.hbs

I am using babel-plugin-ember-modules-api-polyfill, because there are imports like that import { inject as service } from @ember/service in the sign-in route. The plugin transform their , for example, toEmber.Service

After compilation, when I open dist/sign-in.js in browser I get an error

image
image893×92 2.84 KB

It because there are not any entities (Service, Mixin, Component, etc) in Ember object

But when I run ember s and open application in Browser, I can get, for example Ember.Service

Do you know, how to import Service, Controller, Component and all Ember Classes like these?

Thanks.

Gruntfile config:

grunt.loadNpmTasks('grunt-browserify');
     .../
      browserify: {
        loginPage: {
          options: {
            browserifyOptions: {
              debug: true,
            },
            transform: [
              "browserify-handlebars",
              ["babelify", {
              "presets": ['@babel/preset-env'],
              "plugins": ['@babel/proposal-class-properties', 'babel-plugin-ember-modules-api-polyfill']
            }]],
            extensions: ['.js', '.hbs']
          },
          files: {
            'dist/sign-in.js': ['app/routes/sign-in.js', 'app/templates/sign-in.hbs']
          }
        },
2

Hi @Volodymyr_Smal-Stots! Any reason in particular you’re hand compiling with Grunt instead of using ember-cli to build? This is highly unconventional and these modules aren’t really meant to be used in this way.