如何在sailsjs 应用程序中使用ES6 导入和反应？

Posted 2023-04-12

【中文标题】如何在sailsjs 应用程序中使用ES6 导入和反应？

【英文标题】：How to use ES6 import and react in a sailsjs app?

【发布时间】：2018-12-21 17:53:44

【问题描述】：

我正在尝试更新一个网络应用程序以获取最新的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 版本并且 require 语法仍然有效，所以也许我也可以在这个组件上使用 require 语法，但我宁愿能够通过导入来做事。 我是新来的反应和通天塔，所以我不确定我是否需要一些通天塔魔法或这里发生了什么。我应该发布我的各种配置 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 以某种方式搞砸了，但 assets/bower_components 下没有这样的文件夹。

【参考方案1】：

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

你可以像这样使用 babel：

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

然后在你的根目录下创建一个 .babelrc 文件来配置和添加这个：

"presets": ["env"]

如果您想打包文件以提供给客户端，您可以使用 webpack 或 parcel 之类的打包器。

【讨论】：

谢谢，我确定你在正确的轨道上，但我已经安装了一些 babel 的东西，虽然我不确定那个 cli。仅供参考，我使用上面的 babel.js 配置文件更新了我的帖子。我还没有开始捆绑任何东西。我还应该提到我们正在使用 Grunt。

我尝试按照您的建议进行操作，现在当我尝试运行该应用程序时，我收到此错误消息：错误：** Grunt :: 发生错误。 ** 错误： - - - - - - - - - - - - - - - - - - - - - - - -------------------------- 由于警告而中止。运行“babel:dev”（babel）任务警告：无法读取 null 的属性“绑定”

好的，感谢您的澄清。我之前没有使用过 es6 导入的 gulp 或 grunt，所以也许看看这个？ ***.com/questions/41067220/…