无法在 Gulp 项目中导入 React Router Dom

Posted 2023-02-22

【中文标题】无法在 Gulp 项目中导入 React Router Dom

【英文标题】：Can not Import React Router Dom In Gulp Project

【发布时间】：2017-11-09 16:52:16

【问题描述】：

这是我对 gulp 的第一次体验。我尝试在我的index.jsx 中导入react-route-dom。但是当我尝试导入它时，我遇到了这个错误消息：

'react-router-dom' 由 projectMyAccount.Site\project.MyAccount.Site.Desktop\scripts\js\desktop\bundle\app.js 导入，但无法解析 - 将其视为外部依赖项 在 options.globals 中没有为外部模块“react-router-dom”提供名称——猜测是“reactRouterDom”

索引 Jsx：

import Index from '../pages/MyAccount/Index';
import Support  from '../pages/Support/Index';
import BrowserRouter as Router, Route,Link from 'react-router-dom';

class Pager extends React.Component 

    constructor(props)
        super(props);
    

    render()
        <Router>
     <div>
         <ul>
             <li><Link to="/test1">Home</Link></li>
             <li><Link to="/about-us">About Use</Link></li>
         </ul>

         <hr/>

         <Route path="/hesabim" component=Index/>
         <Route path="/about" component=Support/>
     </div>
 </Router>
    
;

主要的 gulp 任务：

gulp.task('es6', function () 
  return gulp.src(filePath + '/scripts/js/**/*.js')
        .pipe(babel())
        .pipe(gulp.dest(filePath + '/scripts/js'));
);

gulp.task('react', function () 
    return gulp.src(filePath + '/scripts/jsx/**/*.jsx')
        .pipe(react(harmony: false, es6module: true))
        .pipe(gulp.dest(filePath + '/scripts/js/'));
);

gulp.task('create-app', function () 
  return gulp.src([
      filePath + '/Scripts/js/desktop/pages/Index.js'
    ])
    .pipe(concatJs("hepsiburada.js"))
    .pipe(gulp.dest(filePath + '/scripts/js/desktop/bundle'))
    .pipe(rollup(
      allowRealFiles: true,
      "format": "iife",
      "plugins": [
        require("rollup-plugin-babel")(
          "presets": [["es2015",  "modules": false ]],
          "plugins": ["external-helpers"]
        )
      ],
      entry: filePath + '/scripts/js/desktop/bundle/app.js'
    ))
    .pipe(gulp.dest(filePath + '/build/scripts/'));
);

怎么了？我是否必须为 gulp 导入另一个包？我不清楚。我可以像这样将它与 unpkg 包一起使用：

import Index from '../pages/MyAccount/Index';
import Support  from '../pages/Support/Index';
class Pager extends React.Component 

    constructor(props)
        super(props);
    

    render()

        const Router = ReactRouterDOM.BrowserRouter;
        const Link = ReactRouterDOM.Link;
        const Route = ReactRouterDOM.Route;

        return (<Router>
     <div>
         <ul>
             <li><Link to="/test1">Home</Link></li>
             <li><Link to="/about-us">About Use</Link></li>
         </ul>

         <hr/>

         <Route path="/hesabim" component=Index/>
         <Route path="/about" component=Support/>
     </div>
 </Router>);
    

;

但我认为长期不利于发展。如何从节点模块实现它？

【参考方案1】：

看起来您可能需要将 rollup-plugin-node-resolve 添加到您的 gulp 中。在这里查看可能的答案：gulp rollup not working external resource import

【讨论】：

在我这样做之后我得到另一个错误Error: 'default' is not exported by node_modules\history\createBrowserHistory.js

好的！在我添加汇总 commonjs 后，问题已得到解决。非常感谢。