Question

我正在尝试更新Web应用程序以获取最新的sailsjs并做出响应。该应用程序已在使用Sails v0.12，react 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

我的应用程序中的其他页面仍使用较早的react版本并需要语法，因此仍然可以正常工作，因此也许我也可以在该组件上使用要求语法的页面，但我更希望能够使用import进行操作。我是新来的反应者和通天塔，所以我不确定是否需要通天塔魔法或这里发生了什么。我应该发布各种配置json文件吗？就像我说的那样，该项目不是使用react cli创建的新项目。

PS：我的/ tasks / config文件夹中有以下babel.js文件：

/**
 * 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 react-notification-system在某种程度上搞砸了，但是asset / bower_components下没有这样的文件夹。

Answer 1

我对sailsjs并不熟悉，但是如果它在node中运行，那么您将需要一些东西来转换es6导入，因为node尚未完全支持它们。

您可以使用babel这样操作：

print t($5) "\n" t($6)

然后在您的根目录中创建一个.babelrc文件以进行配置和添加：

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

如果要将文件打包以提供给客户端，则可以使用webpack或parcel之类的打包程序。

如何在Sailsjs应用中使用ES6导入并做出反应？

1 个答案: