Невозможно выполнить теги RiotJS в приложении Rails - PullRequest
Новая
       24

Невозможно выполнить теги RiotJS в приложении Rails

0 голосов
/ 19 октября 2019

Я пытаюсь интегрировать RiotJS в мое приложение Rails. Ниже показан соответствующий код из моего приложения на Rails.

/ app / assets / riot-tags / test.tag 

  <testtag>
    <h1>This is a test tag built using RiotJS</h3>
  </testtag>

gulpfile.js

  const
    // modules
    del = require('del'),
    gulp = require('gulp'),
    riot = require('gulp-riot');

  var srcDir = './app/assets/riot-tags/';
  var destDir = './app/assets/javascripts/riot/';

  function compileRiot() {
    return gulp.src(srcDir + '**/*.tag')
          .pipe(riot())
          .pipe(gulp.dest(destDir));
  }

  function riotTask(done) {
    del(destDir + '**/*.js');
    compileRiot();

    done();
  }

  function watch(done) {

    // riot tags changes
    gulp.watch(srcDir + '**/*.tag', function(file) {
      if (file.event == 'unlink') {
        console.log(">>>>>>" + file.path);
        del(destDir + file.path.slice(srcDir.length - 2).replace(/\.tag$/, '.js'))
      } else {
        compileRiot();
      }
    });

    done();
  }

  exports.watch = watch;

  // default task
  exports.default = riotTask;

package.json 

  {
    ...
    ..
    "scripts": {
      "build": "gulp",
      "watch": "gulp watch"
    }
    ...
    ...
    "dependencies": {
      "riot": "^4.6.5"
    },
    "devDependencies": {
      "del": "^5.1.0",
      "gulp": "^4.0.2",
      "gulp-riot": "^1.1.5"
    }
  }

Когда я запускаю npm run build, он генерирует test.js в папке location app/assets/javascripts/riot со следующим содержимымв нем 

  riot.tag2('testtag', '<h1>This is a test tag built using RiotJS</h3>', '', '', function(opts) {
  });

тогда в моем представлении файл

/ app / views / welcome / index.html.haml 

%h3<
  = "Welcome!"

- test_tag_asset_path = asset_path("test.js")

#testTag
  %testtag


%script{type: 'module'}

  -# import the component javascript output generated via @riotjs/compiler
  import TestTag from '#{test_tag_asset_path}'

  -# register the riot component
  riot.register('testtag', TestTag)

  riot.mount('testtag')

КогдаЯ делаю так, что представление рендерится, но я не вижу разметки, определенной моим бунтовым тегом testtag. В консоли браузера я вижу следующую ошибку 

  SyntaxError: import not found: default

Содержание DOM на вкладке «Инспектор браузера» показано ниже 

  <body>
    <div id="testTag">
      <testtag></testtag>
    </div>
    <script type="module">
      import TestTag from '/assets/test-aa0a7ff8803df40b147cd3ac34cac4f721227bb7dccec0589012d6933a83406f.js'
      riot.register('test-tag', TestTag)
      riot.mount('test-tag')
    </script>
  </body>

Кто-нибудь может помочь в решении проблем? Я новичок в сфере NodeJS, поэтому, если я допустил какие-то глупые ошибки, пожалуйста, помогите исправить их.

Также есть дополнительные сомнения. На здесь упоминается

Пользовательские теги должны быть преобразованы в javascript, прежде чем браузер сможет их выполнить. Компилятор riot предназначен для преобразования тегов riot в модули javascript. Скомпилированный тег riot будет выглядеть так: 

export default {
  css: `my-tag { color: red; }`, // component css string
  template: function() {}, // internal riot template factory function
  exports: {}, // component events and lifecycle methods
  name: 'my-tag' // component id
}

Но как можно видеть, что компиляция gulp-riot производит riot.tag2('testtag',..., как показано ранее. Итак, что-то не так в скомпилированном коде?

Еще одна вещь: я попытался скомпилировать через Riot.js CLI , однако я обнаружил ошибку 

$ riot app/assets/riot-tags/test.tag --output app/assets/test_new.js
(node:19282) UnhandledPromiseRejectionWarning: Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (/usr/local/lib/node_modules/@riotjs/cli/node_modules/rollup/dist/rollup.js:5330:30)
    at Module.error (/usr/local/lib/node_modules/@riotjs/cli/node_modules/rollup/dist/rollup.js:9612:9)
    at tryParse (/usr/local/lib/node_modules/@riotjs/cli/node_modules/rollup/dist/rollup.js:9524:16)
    at Module.setSource (/usr/local/lib/node_modules/@riotjs/cli/node_modules/rollup/dist/rollup.js:9841:33)
    at Promise.resolve.catch.then.then.then (/usr/local/lib/node_modules/@riotjs/cli/node_modules/rollup/dist/rollup.js:12622:20)
(node:19282) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:19282) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Я пыталсяпоиск некоторых решений по этой ошибке, но не повезло.

...