引言
npm 是全球最大的 Node.js 包管理工具和社区，它赋予了前端开发的极大方便，使得从原始的静态页面到现在复杂的交互式 web 应用的开发变得更为容易。在各种复杂的前端框架和工具之中，crapp (Clean React Application with Parcel and PostCSS) 作为一种高效的 React 应用程序模板，为前端开发者提供了便携式，快速和高效开发的解决方案。本篇文章将详解如何使用 npm 包 crapp 进行前端开发。
安装 crapp
在项目文件夹中运行以下命令来使用 crapp 创建一个新项目。
npx crapp-app my-app cd my-app npm start
你会看到一个新的 React 应用程序已经运行在 http://localhost:1234。crapp 使用 Parcel 作为打包工具和 PostCSS 作为样式预处理器。
crapp 的目录结构
以下是一个典型的 crapp 应用程序的目录结构：
-- -------------------- ---- ------- ------ --- ------ - --- ----------- - --- ---------- - --- ------------- --- --- - --- ---------- - - --- ------ - --- ------ - - --- -------- - - --- --------- - --- -------- - --- ---------------- --- -------- --- ------------- --- ------------ --- ---------
public: 包含任何在开发过程中需要公开的文件，例如 CSS、图片、字体等。src: 包含所有的源码。components: 包含所有的 React 组件。styles: 包含所有的样式表。index.js: 应用程序的入口点。serviceWorker.js: PWA 的 service worker。
.babelrc: Babel 配置。.postcssrc.js: PostCSS 配置。package.json: 应用程序的配置文件。README.md: 应用程序的说明文档。
如何开发一个新的 React 组件
假设我们现在要开发一个名叫 MyComponent 的 React 组件。
在
src/components中创建一个新的文件MyComponent.js：import React from 'react'; const MyComponent = () => <h1>Hello, World!</h1>; export default MyComponent;
在这里，我们简单地创建了一个组件，并导出它。
修改
src/App.js，把MyComponent加入到应用程序中。-- -------------------- ---- ------- ------ ----- ---- -------- ------ ----------- ---- --------------------------- ------ --------------------- ----- --- - -- -- - ---- ---------------- ------------ -- ------ -- ------ ------- ----注意我们还导入了一个样式表，
./styles/index.css，它是我们之前创建的样式表。现在你可以在 http://localhost:1234 看到你的新组件。
构建和部署应用程序
当你的应用程序已经完成后，你需要将它构建成静态文件，并且部署到一个 Web 服务器上。 运行命令：
npm run build
上述命令会在 dist 目录下生成一组静态文件，这些文件就可以作为你的应用程序的发布版本。最后，你需要将这些静态文件上传到一个 Web 服务器上即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005606781e8991b448de874