[英]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.