reactjs - 如何使用 browserify、babel、eslint、react/jsx 和 jest（无 gulp/grunt）设置应用程序？

Question

我想使用

1. 浏览器化
2. 巴别塔
3. ESLint
4. 反应（使用 jsx）
5. 笑话

Npm 作为任务管理器（没有 gulp|grunt|brocoli）

Answer 1

首先，您需要使用npm.

npm install --save-dev eslint, browserify, babelify, jest-cli

包名自我解释了安装了什么库。

浏览器化：

假设这app/index.js是您的根文件。您可以添加以下脚本来构建和监视源文件。

"scripts": {
    "build": "browserify app/index.js > public/js/bundle.js",
    "install": "npm run build",
    "watch": "watchify app/index.js -o public/js/bundle.js"
  }

ES6 和 JSX

要编译 ES6 和 JSX，请将以下内容添加到package.json：

"browserify": {
    "transform": [
      "babelify"
    ]
  }

现在，browserify 将您的 ES6 和 JSX 语法转换为纯 Javascript 5。有关更多转换，请查看https://github.com/substack/node-browserify/wiki/list-of-transforms。

笑话

要使用 Jest，请将以下内容添加到 package.json。

"scripts": {
   "test": ""
 }

之后，您可以使用npm test. 笑话文档

ESLINT

如果这是你第一次使用 ESLint，你应该使用设置一个配置文件eslint --init，然后你需要添加一个新脚本到package.json.

例如：

"lint" : "eslint app/*.js"

请注意，您需要在上述命令中指定要 lint 的所有源文件。