Как использовать импорт ES6 и реагировать в приложении sailsjs? - PullRequest
Новая
       24

Как использовать импорт ES6 и реагировать в приложении sailsjs?

0 голосов
/ 21 декабря 2018

Я пытаюсь обновить веб-приложение, чтобы выбрать последние версии sailsjs и реагировать.Приложение уже использовало паруса v0.12, а реакциятреки v0.14.x и ES5 в стиле requirejs.config импортируются следующим образом: 

requirejs.config({
  urlArgs: "v=" + myapp.buildNumber,
  paths: {
    'react': '/bower_components/react/react-with-addons',
    'reactdom': '/bower_components/react/react-dom',
    'label': '/js/shared/reactLabel',      
    'moment': '/bower_components/moment/moment',   

  },
  shim: {    
    'reactRedux': ["react"]
  }
    });


require(['react', 'label', 'moment', 'reactdom', ], 
    function (React, Label, moment, ReactDOM, ) {

...

Теперь, после обновления тонныПакеты npm и парусов к последним версиям. Я пытаюсь отреагировать на один простой компонент, такой как в PCycle.jsx: 

import React , {Component } from 'react'


class PCycle extends Component {

  render(){
    console.log(this.props);  

    return (
        <div className="post card" >hi world</div>
    )
  }
};

Но когда я загружаю страницу, этот компонент появляется, и я получаю эту ошибку икомпонент не отображается. 

VM3398 require.js:165 Uncaught Error: Module name "react" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
    at makeError (VM80 require.js:165)
    at Object.localRequire [as require] (VM80 require.js:1429)
    at requirejs (VM80 require.js:1791)
    at VM1011 pCycle.js:3

Другие страницы в моем приложении, которые все еще используют более старую версию реакции и требуют синтаксиса, все еще работают, так что, возможно, я могу использовать тот, который требует синтаксиса для этого компонента, но я бы предпочелделать вещи с импортом.Я новичок, чтобы реагировать и ворчать, поэтому я не уверен, нужно ли мне немного магии вавилонизма или что здесь происходит.Должен ли я публиковать свои различные файлы конфигурации JSON?Проект, как я уже сказал, не новый, созданный с реагирующим кликом.

PS: у меня есть этот файл babel.js в моей папке / tasks / config: 

/**
 * Compile JSX files to JavaScript.
 *
 * ---------------------------------------------------------------
 *
 * Compiles jsx files from `assest/js` into Javascript and places them into
 * `.tmp/public/js` directory.
 *
 */
module.exports = function(grunt) {

  grunt.config.set('babel', {
    dev: {
      options: {
        presets: ["@babel/preset-env",'@babel/react']
      },
      files: [
        {
        expand: true,
        cwd: 'assets/js/',
        src: ['**/*.jsx'],
        dest: '.tmp/public/js/',
        ext: '.js'
        },
        {
          expand: true,
          cwd: 'assets/bower_components/react-notification-system',
          src: ['**/*.jsx'],
          dest: '.tmp/public/bower_components/react-notification-system',
          ext: '.js'
        }
      ]
    }
  });

  grunt.loadNpmTasks('grunt-babel');
};

Может быть, теСистема реагирования-уведомления bower_component каким-то образом запуталась, но такой папки нет в assets / bower_components.

1 Ответ

0 голосов
/ 21 декабря 2018

Я не знаком с sailsjs, но если он работает в узле, вам понадобится что-то для переноса импорта es6, так как узел еще не поддерживает их полностью.

Вы можете использовать babel, чтобы сделать это следующим образом: 

npm install --save-dev babel-cli babel-preset-env

Затем создайте файл .babelrc в корне для настройки и добавьте это: 

{"presets": ["env"]}

Еслиесли вы хотите связать файлы для обслуживания клиента, вы можете использовать такой пакет, как веб-пакет или посылка.

...