[英]Converting react from es5 to es6
我正在将现有的React项目从es5转换为es6。 我有babel-preset-react
。 将es6添加到myFile.js时出现错误:
解析文件时出现意外令牌。
码:
var React = require('react');
var Input = require('../common/textInput')
var ReviewTimeOffRequestPage = React.createClass({
let m = 0;//add this and I get an error
render: function() {
babel-preset-react是否需要单独的es6模块吗?
这就是react预置提供的https://babeljs.io/docs/plugins/preset-react/ :
因此,基本上,这些是jsx和流特定的转换器。 这意味着,如果您使用上述5个转换器未涵盖的任何其他语言功能-您也必须将其插入。
PS:就您而言,在对象文字中包含该语句在语法上无论如何还是不正确的。
{
let m = 0;
}
上面的代码没有意义,因为它们必须是键值对(或函数表达式),而不是语句。
babel-preset-reac
不包含ES6功能,要启用ES6,您应该添加babel-preset-es2015
。
这是我解决了将es5从es5转换为es6的问题:
npm install babel-preset-react
然后将.babelrc
配置为使用es2015:
{
"presets": ["react", "es2015"]
}
棉绒(gulp-eslint)。 设置es6:在eslint.config.json中为true
{
"ecmaFeatures": {
"jsx": true
},
"env": {
"browser": true,
"node": true,
"jquery": true,
"es6": true
},
"rules": {
"quotes": 0,
"no-trailing-spaces": 0,
"eol-last": 0,
"no-unused-vars": 0,
"no-underscore-dangle": 0,
"no-alert": 0,
"no-lone-blocks": 0
},
"globals": {
"jQuery": true,
"$": true
}
}
从es5切换到babel-preset-react后,找不到jQuery的问题。 奇怪的是,我将jQuery导入移动到了入口点main.js
的顶部,并使用了es6 import语法。
main.js
//For some reason when using babel-preset-es2015 the import needs to be
//defined on two lines using the import syntax.
//It also needs to be defined at the top of this file
//$ = jQuery = require('jquery');//didnt work
//$ = require('jquery');//didn't work
//jQuery = require('jquery');//didnt work
import $ from 'jquery';
import jQuery from 'jquery';
var React = require('react');
//...
gulpfile食谱
//Dependencies for reference
var gulp = require('gulp');
var connect = require('gulp-connect');//Runs a local dev server
var open = require('gulp-open');//Open a URL in a web browser
var browserify = require('browserify');//bundles js
var reactify = require('reactify');//transforms react jsx to js
var babel = require('babelify');;//transforms es6 to es5
var sourcemaps = require('gulp-sourcemaps');//sourcemaps for debugging
var source = require('vinyl-source-stream');//use conventional text streams with gulp
var buffer = require('vinyl-buffer');//buffer to allow sourcemaps to work
var concat = require('gulp-concat');//concatenates files
var lint = require('gulp-eslint');//Lint js files, including JSX
var uglify = require('gulp-uglify');
//....
gulp.task('js', function(){
browserify(config.paths.mainJs, { debug: true })
.transform(babel)
.bundle()
.on('error', console.error.bind(console))
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
// Add transformation tasks to the pipeline here.
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(config.paths.dist + '/scripts'))
.pipe(connect.reload())
});
gulp.task('lint', function(){
return gulp.src(config.paths.js)
.pipe(lint({config: 'eslint.config.json'}))
.pipe(lint.format());
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.