为什么我需要的库没有从ES6转换到ES5

Why are my required libs not being converted from ES6 to ES5?

本文关键字：ES6 转换 ES5 为什么      更新时间：2023-11-11

我正在编写一个react应用程序，其中我在另一个使用ES6语法的库中require。这是我使用lib:的代码

var React = require('react');
var Calendar = require('horario-calendar');
var appts = [];
React.render(<Calendar />, document.getElementById('calendar'));

horario-calendar是第三方应用程序，它充满了ES6语法。我有一个gulp任务，应该是transpile到ES6的所有代码。任务如下：

var browserify = require('browserify');
var reactify = require('reactify');
var source = require('vinyl-source-stream')
var to5 = require('6to5ify');
module.exports = function(gulp, config) {
    gulp.task('browserify', function() {
        browserify(config.app.src, {debug: true})
            .transform(to5)
            .transform(reactify)
            .bundle()
            .pipe(source(config.app.bundleName))
            .pipe(gulp.dest(config.app.bundle));
    });
};

但required不是transpileing by code，它只是transpileing my code。我在horario-calendar中仍然有ES6样式的导入。我还需要对transpile那个代码做什么？

我建议使用webpack而不是Browserify-您将额外享受JSX热加载器的好处。https://github.com/babel/6to5-loader开箱即用，对我来说完美无瑕，尽管我确实更换了这个：

{ test: /'.js$/, exclude: /node_modules/, loader: '6to5-loader'}

在他们的例子中，对这个：

{ test: /'.jsx$/, exclude: /node_modules/, loader: '6to5-loader'}

由于我碰巧只在.jsx文件中使用箭头函数，所以请注意这一点。

理想情况下，这个负担将由第三方库承担，但如果这不是一个选项，您可以尝试使用全局转换：

如果opts.global为true，则转换将对所有文件进行操作，不管它们是否存在于node_modules/目录中的某个级别。由于大多数情况下，谨慎而谨慎地使用全局转换一个普通的变换就足够了。您也不能配置全局在package.json中进行转换，就像使用普通转换一样。

全局变换总是在任何普通变换运行之后运行。

因此用.transform({ global: true }, to5)代替.transform(to5)。

此外，6to5（现在的Babel）有内置的JSX支持，所以您不需要Reactivity。

相关文章：