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

Question

这是我第一次使用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'

Index 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>);
    }

};

但我认为长期来看这对开发不利。我该如何从Node模块实现它？

- Kamuran Sönecek

Answer 1

看起来你可能需要在gulp中添加rollup-plugin-node-resolve。 可以在此处查看可能的答案: gulp rollup not working external resource import

- Doug Coburn

---

完成后，我又遇到了另一个错误：Error: 'default' is not exported by node_modules\history\createBrowserHistory.js。 - Kamuran Sönecek

好的！在我添加了Rollup CommonJS之后，问题已经解决了。非常感谢你。 - Kamuran Sönecek