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

Question

我想使用设置应用程序

1. Browserify
2. BabelJS
3. ESLint
4. 反应(与jsx)
5. 笑话

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

Answer 1

首先,您需要安装所有这些库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文档

ESLINT

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

例如:

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

注意,您需要在上面的命令中指定要作为lint的所有源文件.