如何使用 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、babel、eslint、react/jsx 和 jest（没有 gulp/grunt）设置应用程序？
【发布时间】：2015-08-14 06:25:05
【问题描述】：

我想使用

设置一个应用程序

浏览器
BabelJS
ESLint
反应（使用 jsx）
开玩笑

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

【问题讨论】：

您的具体问题是什么？只需安装这些模块并使用它们。没有什么需要设置的。您可以使用您经常运行的命令在您的 package.json 中添加一个脚本，但仅此而已。您可以在此处了解有关脚本的更多信息：docs.npmjs.com/misc/scripts
你用这个特定的技术栈完成了吗？这有点棘手，因为您必须使用正确的插件才能使用 ESLint 和 Jest。这篇文章很有用但还是要搞清楚这玩笑的部分medium.com/javascript-scene/…
几乎所有东西都是通过 package.json（或模块特定的配置文件）配置的。对于 jest + babel，看看github.com/babel/babel-jest

标签： reactjs browserify jestjs babeljs eslint

【解决方案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 运行测试。 Jest documentation

ESLINT

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

例如：

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

注意，你需要在上面的命令中指定你想要被 lint 的所有源文件。

【讨论】：

感谢这个答案有很多细节。足以让我蒙蔽。可能解决这个问题的例子是 es6 react hello world js-code 和 html。