buble-react-rollup-starter - GitLite

KO | EN

gitlite — search

#hacktoberfest #ai #machine-learning #linux #nodejs #macos #awesome #cli #vue #awesome-list #security #pytorch #mcp #openai

buble-react-rollup-starter

(★ 73)

A simple starter project to build cool React applications with Bublé and Rollup.

파일 탐색기

최종 버전 다운로드 (.zip)

- dev.js
- prod.js
- index-dev.html
- index.html
- - dummy-component.jsx
- index.js
.gitignore
.travis.yml
LICENSE
package-lock.json
package.json
README.md
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/yamafaktory/buble-react-rollup-starter

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd buble-react-rollup-starter

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm i buble-react-rollup-starter

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm i

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm start

개발/실행 서버를 켭니다.

npm run build:dev

배포용으로 코드를 최적화해서 빌드 파일을 생성합니다.

npm run build

배포용으로 코드를 최적화해서 빌드 파일을 생성합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# buble-react-rollup-starter [![Build Status](https://travis-ci.org/yamafaktory/buble-react-rollup-starter.svg?branch=master)](https://travis-ci.org/yamafaktory/buble-react-rollup-starter) [![npm version](https://img.shields.io/npm/v/buble-react-rollup-starter.svg?style=flat)](https://www.npmjs.com/package/buble-react-rollup-starter) [![Standard - JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)

> A simple boilerplate for web apps with [React](https://facebook.github.io/react/), [Bublé](https://buble.surge.sh/guide/) and [Rollup](http://rollupjs.org/).

The aim of this project is to provide a simple boilerplate to get started with React bundled as an ES2015 module via Rollup, compiled by Bublé.

To sum up and give an overview of what can be achieved like a breath of fresh air:

```JavaScript
// Import React, ReactDOM and the DummyComponent.
import React from 'react'
import ReactDOM from 'react-dom'
import { DummyComponent } from './components/dummy-component.jsx'

// Define the root element.
const root = document.querySelector('main')

// Append the DummyComponent instance to the root element.
ReactDOM.render(<DummyComponent />, root)
```

Rollup will magically includes only what you need in your bundle depending on the imports!

## Prerequisite

### NodeJS

The easiest way to go is to use [nvm](https://github.com/creationix/nvm) and to install one of the recent NodeJS versions bundled with npm 3 by default (i.e. *NodeJS >= 5.0.0*).

## Installation

Via **npm** into a fresh project:

```sh
npm i buble-react-rollup-starter
```

Or using Git:

```sh
git clone https://github.com/yamafaktory/buble-react-rollup-starter.git
cd buble-react-rollup-starter
npm i
```

For a faster installation, use [yarn](https://yarnpkg.com/en/) instead of npm.

## Usage

### Development

A basic workflow involving [Browsersync](https://www.browsersync.io/) is already implemented. Running the following command will open your default browser pointing to the `html/index-dev.html` file. Any modification of one of the files included in the *src* directory will trigger a new development build and refresh your browser:

```bash
npm start
```

You can also generate a development build by running the following command:

```bash
npm run build:dev
```

### Production

First run the following command:

```bash
npm run build
```

Then open the `html/index.html` file in your browser.

The Rollup production configuration file switch the NodeJS environment to production and minifies the code with [UglifyJS](http://lisperator.net/uglifyjs/).

## Linting

The code quality is checked by the [JavaScript Standard Style](http://standardjs.com/).

## License

Released under the [MIT license](https://opensource.org/licenses/MIT) by Davy Duperron.