Question

我正在我的jsx中导入一个css，并使用gulp与browserify和babelify。不知怎的，我收到这个错误： error screenshot

我有以下jsx导入css：

import '../../css/app.css';

function Square(props) {
    return (
        <button className="squares" onClick={props.onClick}>
          {props.value}
        </button>
        );
} ...

然后我在我的gulp文件中有这个：

var bundler = watchify(browserify(files[i], {
    debug : true
}).transform(babelify, {
    ignore : /\.([json]|[css])$/,
    presets : [ 'es2015', 'react', 'env' ]
}), {
    poll : true
}); ...

在我的package.json文件中，我有一个用于browserify的配置：

  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015",
            "env",
            "react"
          ]
        }
      ]
    ]
  },

我有以下依赖项：

  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-env": "^1.5.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babelify": "^7.3.0",
    "browserify": "^14.4.0",
    "glob": "^7.1.2",
    "gulp": "^3.9.1",
    "gulp-cli": "^1.3.0",
    "gulp-exit": "0.0.2",
    "gulp-sourcemaps": "^2.6.0",
    "gulp-uglify": "^3.0.0",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.9.0"
  }

正如你所看到的，我可能已经添加了更多我需要的预设，我对此非常陌生，我认为也许babel不知道它正在查看css文件并将其视为jsx。

Answer 1

我发现了我所缺少的东西，＆＃34; browserify-css＆＃34;。

我将gulpfile改为：

var bundler = watchify(browserify(files[i], {
    debug : true
}).transform(babelify.configure({
    presets : [ 'es2015', 'react', 'env' ]
})).transform(browserifyCss), {
    poll : true
});

Answer 2

我会像这样直接导入CSS一样小心。它实际上是一个特定于Webpack的功能，而不是任意导入静态资产的ES6规范的一部分。您现在正在编写直接依赖于browserify-css或webpack的源代码，如果您以后决定切换构建系统，那么重构您的代码是很麻烦的。方式（只是在你的html文件中的链接元素中包含css，就像你通常那样）

在Gulp中使用babelify，将css结果导入意外的令牌“{”

2 个答案: