Question

我有一个用Angular 1.5编写的应用程序，我们开始看到性能问题，并决定在某些地方逐步使用React，直到我们可以完全重写。我遇到的问题是浏览器抛出以下错误：

未捕获的SyntaxError：意外的令牌导出

我怀疑这是因为Reacts依赖ES6的问题，但我并非100％肯定。当我检查Chrome开发工具中的代码时，它特别抱怨：

export default Example;

这是我到目前为止的相关代码/文件：

gulpfile.js（相关部分）

gulp.task('scripts', function () {
let files = [
    src_path + 'angular/**/*.js', // Angular files
    src_path + 'react/**/*.js' // React files
];
return gulp.src(files, { 'base': './src'})
        .pipe(expect({errorOnFailure: true, reportUnexpected: false}, files))
        .on('error', (err) => handleError(err, 'fatal') )
        .pipe(filenames('scripts'))
        .pipe(babel())
        .pipe(gulpif(process.env.SERVER_ENV === "PRODUCTION", concat('javascript.min.js')))
        .pipe(gulpif(process.env.SERVER_ENV === "PRODUCTION", uglify()))
        .pipe(gulp.dest(dist_path + 'assets/js'))
        .pipe(preserve());
});

gulpfile还根据文档添加了react和react-dom。我知道这两个文件正在正确加载，因为我console.log()它们并且显示正常。也就是说，React和ReactDOM定义为它们应该是。

exampleDirective.js

console.log('1 React = ', React); // I see this just fine
console.log('1 ReactDOM = ', ReactDOM); // I see this just fine

(function() {

'use strict';

angular
    .module("example.module")
    .directive('example', example);

example.$inject = [];

function example () {
    return {
        restrict: 'E',
        scope: false,
        link: function (scope, el) {
            ReactDOM.render(<Example />, el[0]);
        }
    };
}
})();

example.js（React component）

export default class Example extends React.Component {
    render() {
        return (
            <div>Yo, this worked!</div>
        );
    }
}

.babelrc

{
    "presets": [
        "react",
        ["env", {
            "modules": false,
            "loose":  true,
            "debug": false
        }]
    ]
}

我还安装了babel-preset-react和babel-preset-env。我看到有很多不同的＆＃34;插件＆＃34;对于Babel，但它根本不清楚，如果有的话，我需要安装并添加到我的.babelrc文件中。所以我没有添加任何内容，这可能是问题（？）。

最终，我认为这是Babel和ES6的问题，但我不确定。 React文档提到webpack和Browserify，但我不认为我需要使用这些，因为我在构建过程中使用gulp（这是正确的吗？）。

关于我在这里做错了什么的任何想法？提前感谢您的回复！

如何让React与我的Angular 1.5应用程序一起使用？

0 个答案: