use file path and add imports

Used RFC #176 modules API for imports.

packages/ember-application/lib/system/engine.js

@@ -188,7 +188,7 @@ Engine.reopenClass({
     This must be a unique name, as trying to register two initializers with the
     same name will result in an error.
 
-    ```javascript
+    ```app/initialize/named-initializer.js
     Ember.Application.initializer({
       name: 'namedInitializer',
 

packages/ember-glimmer/lib/helper.js

@@ -64,11 +64,14 @@ var Helper = FrameworkObject.extend({
     For example, this component will rerender when the `currentUser` on a
     session service changes:
 
-    ```js
-    // app/helpers/current-user-email.js
-    export default Ember.Helper.extend({
-      session: Ember.inject.service(),
-      onNewUser: Ember.observer('session.currentUser', function() {
+    ```app/helpers/current-user-email.js
+    import Helper from "@ember/component/helper"
+    import { inject as service } from "@ember/service"
+    import { observer } from "@ember/object"
+
+    export default Helper.extend({
+      session: service(),
+      onNewUser: observer('session.currentUser', function() {
         this.recompute();
       }),
       compute() {
@@ -105,8 +108,9 @@ Helper.reopenClass({
   The `helper` method create pure-function helpers without instances. For
   example:
 
-  ```js
-  // app/helpers/format-currency.js
+  ```app/helpers/format-currency.js
+  import { helper } from "@ember/component/helper";
+
   export default Ember.Helper.helper(function(params, hash) {
     let cents = params[0];
     let currency = hash.currency;

packages/ember-glimmer/lib/syntax/outlet.js

@@ -101,9 +101,10 @@ function outletComponentFor(vm, args) {
   Your routes can then render into a specific one of these `outlet`s by specifying the `outlet`
   attribute in your `renderTemplate` function:
 
-  ```javascript
-  // app/routes/menu.js
-  export default Ember.Route.extend({
+  ```app/routes/menu.js
+  import Route from "@ember/routing/route";
+
+  export default Route.extend({
     renderTemplate() {
       this.render({ outlet: 'menu' });
     }

packages/ember-views/lib/mixins/action_support.js

@@ -32,9 +32,10 @@ export default Mixin.create({
     into action notifications of "play" or "stop" depending on some internal state
     of the component:
 
-    ```javascript
-    // app/components/play-button.js
-    export default Ember.Component.extend({
+    ```app/components/play-button.js
+    import Component from "@ember/component";
+
+    export default Component.extend({
       click() {
         if (this.get('isPlaying')) {
           this.sendAction('play');
@@ -56,9 +57,10 @@ export default Mixin.create({
     interaction into application-specific semantics ("play" or "stop") and
     calls the specified action.
 
-    ```javascript
-    // app/controller/application.js
-    export default Ember.Controller.extend({
+    ```app/controller/application.js
+    import Controller from "@ember/controller";
+
+    export default Controller.extend({
       actions: {
         musicStarted() {
           // called when the play button is clicked
@@ -75,9 +77,10 @@ export default Mixin.create({
     If no action is passed to `sendAction` a default name of "action"
     is assumed.
 
-    ```javascript
-    // app/components/next-button.js
-    export default Ember.Component.extend({
+    ```app/components/next-button.js
+    import Component from "@ember/component";
+
+    export default Component.extend({
       click() {
         this.sendAction();
       }
@@ -89,9 +92,10 @@ export default Mixin.create({
     {{next-button action=(action "playNextSongInAlbum")}}
     ```
 
-    ```javascript
-    // app/controllers/application.js
-    App.ApplicationController = Ember.Controller.extend({
+    ```app/controllers/application.js
+    import Controller from "@ember/controller";
+
+    export default Controller.extend({
       actions: {
         playNextSongInAlbum() {
           ...