Question

所以我做了一个

     npm install radium

它在我的节点模块文件夹中安装了radium（我可以在那里看到它）

这里还有我的json包，其中包含其他安装（也许Radium与其他东西有冲突？）这是我的json包：

   {
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "babel-preset-es2015": "~6.3.13",
    "babel-preset-react": "~6.3.13",
    "babelify": "~7.2.0",
    "browserify": "~13.0.0",
    "es6-promise": "~3.0.2",
    "fs": "0.0.2",
    "gulp": "^3.9.0",
    "gulp-browserify": "~0.5.1",
    "gulp-concat": "^2.6.0",
    "gulp-load-plugins": "^1.2.0",
    "gulp-minify-css": "^1.2.1",
    "gulp-postcss": "^6.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.1.1",
    "gulp-uglify": "^1.5.1",
    "node-sass": "~3.4.2",
    "radium": "^0.18.1",
    "vinyl-source-stream": "~1.1.0",
    "yargs": "^3.27.0"
  },
}

我还在组件文件的顶部包含了radium（我知道我可能不需要这样做

var Radium = require('radium');

所以基本上我跟随镭文档，只是剪切和粘贴他们的例子。

我也使用gulp来管理我的所有任务，这就是我的gulpfile的样子：

'use strict';
require('es6-promise').polyfill();

// Load required files that aren't auto-loaded by
// gulp-load-plugins (see below)
var argv            = require('yargs').argv,
    fs              = require('fs'),
    gulp            = require('gulp'),
    merge           = require('merge-stream'),
    minifyCss       = require('gulp-minify-css'),
    react           = require('react'),
    radium          = require('radium'),
    path            = require('path');

// Browserify specific
var babelify = require('babelify'),
    browserify = require('browserify'),
    source = require('vinyl-source-stream');

// This will load any gulp plugins automatically that
// have this format ('gulp-pluginName' [can only have one dash])
// The plugin can used as $.pluginName 
var $ = require('gulp-load-plugins')();

// Paths
var javascriptsPath     = 'static_dev/javascripts',
    sassPath            = 'static_dev/scss';

// Get Folder Function (from paths)
function getFolders(dir) {
    return fs.readdirSync(dir)
        .filter(function(file) {
            return fs.statSync(path.join(dir, file)).isDirectory();
        });
}


// Javascript task
// If coding in Javascript, this will concat, jshint, and uglify
// Copies files to the static javascript directory
gulp.task('scripts-javascript', function() {
    var folders = getFolders(javascriptsPath);
    var tasks   = folders.map(function(folder) {
        return gulp.src(
        [
            'static_dev/javascripts/' + folder + '/caosblog.js',
        ], { base: 'static_dev/javascripts/' + folder })
            // concat files
            .pipe($.concat(folder + '.js'))
            // Check integrity
            .pipe($.jshint())
            // Remove whitespace and uglify
            .pipe($.uglify())
            // Rename the file
            .pipe($.rename(folder + '.min.js'))
            // Copy it to static folder
            .pipe(gulp.dest('static/javascripts'))
    });

    return merge(tasks);
});

// Browserify task
gulp.task('scripts-browserify', function() {
    var folders = getFolders(javascriptsPath);

    var tasks = folders.map(function(folder) {
        return browserify({
            entries: ['./static_dev/javascripts/' + folder + '/caosblog.js'],
            debug: true
        })
            .transform(babelify,  { presets: ['es2015', 'react'] })
            .bundle()
                .pipe(source(folder + '.js'))
                //.pipe($.uglify())
                .pipe($.rename(folder + '.min.js'))
                .pipe(gulp.dest('./static/javascripts/'));
    });

    return merge(tasks);
});

另外请注意，我如何在我的gulpfile中包含radium作为一项要求，尽管我并没有特别将其包含在实际任务中;我需要以某种方式将它包含在任务中吗？

所以，现在为了错误，当我包含这个（就像文档说的那样）

@Radium

它不会识别它并说出“#enexpected Token。”＃34;

Answer 1

@Radium是一个装饰器，所以你需要https://babeljs.io/docs/plugins/syntax-decorators/插件才能使用它们。我查看了Babel的两个预设，似乎没有包含装饰器插件的那些。

您可以将装饰用作普通函数，因此如果您不想使用装饰器语法，也可以将组件包装在Radium（Component）中。这里的组件是构造函数或类，而不是实际的实例。（所以不是Radium（））。

Radium for React.js内联样式意外的令牌错误？

1 个答案: