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

Question

我想使用

设置一个应用程序

浏览器化
BabelJS
ESLint
React（使用 jsx）
开玩笑

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

Answer 1

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

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

包名自行解释了安装的 lib。

浏览器：

假设 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 进行测试。 Jest documentation

ESLINT

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

例如：

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

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

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

How to setup an app using browserify, babel, eslint, react/jsx, and jest (no gulp/grunt)?

browserify

reactjs

eslint

jestjs

babeljs