什么是 buble-react-rollup-starter
buble-react-rollup-starter 是一个基于 Rollup 构建的，用于快速启动项目的 npm 包。它包含了一些在前端开发中常用的插件和配置文件，使用者可以在此基础上快速构建和开发自己的项目。
在 buble-react-rollup-starter 的基础上，我们可以快速搭建出一个使用 Rollup 打包 React 项目的基础工程，并使用 Buble 进行 ES6 代码转译，从而让我们更专注于业务开发。
如何使用 buble-react-rollup-starter
安装
使用 buble-react-rollup-starter 首先需要安装 Node.js 和 npm，然后在终端中执行以下指令安装：
npm install buble-react-rollup-starter --save-dev
安装成功后，我们就可以以此基础快速构建出自己的 React 项目。
目录结构
在使用 buble-react-rollup-starter 构建项目时，我们需要按照约定的目录结构组织我们的代码。这是为了让我们更好的使用 buble-react-rollup-starter 提供的配置文件和插件，尽快启动我们的开发工作。
使用这套目录结构有以下好处：
- 前端开发人员可以快速了解整个项目的目录结构和文件作用
- 根据约定，使用者可以直接在指定的目录下编写特定的代码，而无需考虑配置
buble-react-rollup-starter 的目录结构如下：
-- -------------------- ---- -------
-------
------------
----------------
-------
----------
-----------
----
--------
------其中：
my-app/是项目的主目录，使用者可以将my-app替换为自己的文件夹名称。package.json是 npm 项目的配置文件。rollup.config.js是 Rollup 的配置文件。public/目录包含了所有的静态资源，在开发中直接引用即可。index.html是应用的入口文件。src/包含所有的源代码文件。index.js是应用的入口库文件。App.js是 React 应用程序的主要组件。
配置文件
buble-react-rollup-starter 已经配置好了大部分的 Rollup 插件，包括：
- rollup-plugin-postcss：CSS 处理
- rollup-plugin-terser：代码压缩
- rollup-plugin-commonjs：CommonJS 支持，兼容 npm 包
- rollup-plugin-node-resolve：打包非本地的 node_modules 中的模块。
- rollup-plugin-serve：在本地服务中启动应用
- rollup-plugin-livereload：支持热加载
使用者可以自行修改这些插件的配置，或者添加自己需要的插件。
运行
使用 buble-react-rollup-starter 开发 React 应用程序非常简单，只需要在终端中执行以下命令：
npm start
该命令会自动启动我们的 React 应用程序，并监听文件的变化，实现了热加载。
构建
当我们需要构建我们的应用程序时，只需要在终端中执行以下命令：
npm run build
该命令会自动构建出一个可用于生产环境的优化版本的应用程序。
示例代码
以创建一个简单的 React 应用程序为例，我们可以按照如下的步骤进行：
- 创建一个新的文件夹，在其中执行以下命令
npm init -y npm install buble-react-rollup-starter react react-dom --save
- 在项目根目录下创建一个新的文件
rollup.config.js，并输入以下代码：
-- -------------------- ---- -------
------ ----- ---- ---------------------
------ -------- ---- ------------------------
------ - ----------- - ---- ------------------------------
------ ------- ---- -----------------------
------ ----- ---- ---------------------
------ ---------- ---- --------------------------
------ - ------ - ---- ----------------------
------ --- ---- ----------------
------ -- ---- ----
------ ---- ---- ------
-- ------ ------ ------
----- ------------ - -------------------- -----------------
-- ------------------------------ -
--------------------------
-
------ ------- -
-- ---------------- --- -----
-
------ ---------------
------- -
----- ---------
----- ----------------------- ------------------
------- -----
--
-------- -
-------------
----------- ------- -------
---
-------
-------- -------------------
---
---------
-------- -----
--------- ----
---
-----------
---------
-------
------------ ---------- ----------------
------------------- ----
---
------------
------ ----------------
--
-
-
-
- 在
public目录下创建一个入口文件index.html，并输入以下的内容：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- -----------
-------
------
---- ----------------
------- --------------------------------------
-------
-------- 在
src目录下创建一个新的组件文件App.js，并输入以下代码：
import React from 'react' const App = () => <div>Hello, World!</div> export default App
- 在
src目录下创建一个新的入口文件index.js，并输入以下代码：
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App />, document.getElementById('root'))- 在终端中执行以下命令启动页面：
npm start
在浏览器中访问 http://localhost:3000/，即可看到页面已经成功启动了，并且显示了 Hello, World!。
如果我们想要构建我们的代码用于生产环境的部署，我们只需要在终端中执行以下命令：
npm run build
该命令会自动生成一个包含所有必要资源的 public/build 文件夹，并且优化了我们的代码。
结论
buble-react-rollup-starter 是一个非常实用的工具，让我们更容易快速搭建一个基于 Rollup 打包的 React 项目。通过本文的介绍，相信大家已经可以掌握如何使用 buble-react-rollup-starter 构建一个新的 React 项目，并通过示例代码了解了 buble-react-rollup-starter 能为我们的开发带来的便利之处。
有了这个入门指南，我们相信大家已经有了更好的基础，可以通过 buble-react-rollup-starter 来更快速、更高效地构建自己喜欢的项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8cccdc64669dde54a1