reactjs – 如何使用browserify,babel,eslint,react / jsx和jest(没有gulp / grunt)设置应用程序？

我想使用设置应用程序

> browserify
> BabelJS
> ESLint
> React(使用jsx)
>开玩笑

Npm作为任务经理(没有gulp | grunt | brocoli)

首先,您需要使用npm安装所有这些库.

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

包名称自我解释安装了什么lib.

browserify：

假设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的所有源文件.