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

Question

我想使用

设置一个应用程序

1. 浏览器
2. BabelJS
3. ESLint
4. React(使用 jsx)
5. 开 Jest

Npm 作为任务管理器(无 gulp|grunt|brocoli)

Answer 1

首先，您需要使用 npm 安装所有这些库。

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

软件包名称 self 解释了安装了什么库。

浏览器:

假设 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

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

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

之后，您可以使用npm test运行测试。 Jest documentation

ESLINT

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

例如:

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

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