Làm thế nào để thiết lập một ứng dụng bằng cách sử dụng browserify, babel, eslint, phản ứng/jsx, và jest (không gulp/grunt)?

Question

Tôi muốn cài đặt một ứng dụng sử dụng

1. Browserify
2. BabelJS
3. ESLint
4. Phản ứng (với jsx)
5. jest

NPM như task manager (không ngụm | grunt | brocoli)

Answer 1

Trước hết bạn cần phải cài đặt tất cả các thư viện đó với npm.

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

Tên gói tự giải thích cài đặt lib nào.

Browserify:

Giả sử rằng app/index.js là tập tin gốc của bạn. Bạn có thể thêm các tập lệnh sau để tạo và xem tệp nguồn.

"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 và JSX

Để biên dịch ES6 và JSX, thêm dòng sau vào package.json:

"browserify": { 
    "transform": [ 
     "babelify" 
    ] 
    } 

Bây giờ, browserify biến đổi cú pháp ES6 và JSX của bạn để đồng bằng Javascript 5. Đối với nhiều biến đổi hơn kiểm tra điều này ra https://github.com/substack/node-browserify/wiki/list-of-transforms.

jest

Để sử dụng jest thêm dòng sau vào package.json.

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

Sau đó, bạn có thể chạy thử nghiệm sử dụng npm test. Jest documentation

ESLINT

Nếu đây là lần đầu tiên bạn sử dụng ESLint, bạn nên thiết lập một tập tin cấu hình sử dụng eslint --init và sau đó bạn cần phải thêm một kịch bản mới để package.json.

Ví dụ:

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

Lưu ý, bạn cần phải xác định tất cả các file nguồn của bạn, bạn muốn trở thành lint trong lệnh trên.