npm 包 init-skeleton 是一个前端开发工具，它可以让你创建基础的项目骨架。它提供了一组现成的文件和目录，用于构建一个 Web 应用或者组件库。在使用 init-skeleton 之前，你需要安装 npm。
安装
安装步骤：
- 打开终端，并且进入你的项目目录。
- 运行以下命令：
npm install --save-dev init-skeleton
- 初始化项目：
npx init-skeleton
- 等待执行完，就会生成项目骨架。
文件目录
文件目录如下：
-- -------------------- ---- ------- --- ------------- --- ------- - --- ---------- - --- ----------- --- ---- - --- ----------- - --- ----------- - --- ------- - --- -------- - --- ------- - --- ------ --- -------- --- ---------- --- ------------ --- ---------
文件目录介绍：
- node_modules/ - 存放 npm 安装的依赖包。
- public/ - 存放静态文件，如 html、图片等。
- src/ - 存放 JavaScript 和 CSS 代码。
- components/ - 存放组件文件。
- containers/ - 存放容器文件。
- images/ - 存放图片文件。
- index.js - 主入口文件。
- styles/ - 存放样式文件。
- utils/ - 存放工具函数。
- .babelrc - Babel 转译配置文件。
- .gitignore - Git 版本库忽略文件。
- package.json - npm 包管理文件。
- README.md - 项目说明文件。
文件介绍
package.json
package.json 是 npm 包管理文件，用来管理项目中的依赖和脚本。
-- -------------------- ---- -------
-
------- ---------------------
---------- --------
-------------- ----- -------- -------
------- -----------
---------- -
-------- ------------------- --------
-------- -------------------- --------
--
--------- ------- ------
---------- ------
------------------ -
------------ ----------
------------- ----------
--------------- ---------
------------------- ---------
--------------------- ----------
------------- ---------
-------------- ---------
---------------------- ---------
------------ ----------
-------------- ---------
--------------- ----------
---------- ----------
-------------- ---------
--------------------- --------
--
--------------- -
-------- ----------
------------ ---------
-
-- name - 项目名。
- version - 项目版本。
- description - 项目描述。
- main - 入口文件。
- author - 作者。
- license - 许可协议。
- scripts - 脚本。
- devDependencies - 开发依赖。
- dependencies - 运行依赖。
.babelrc
.babelrc 是 Babel 转译配置文件，用于将 ES6 代码转译为 ES5 代码。
{
"presets": ["env", "react"]
}- presets - 转译预设，在这里我们使用了 env 和 react。
.gitignore
.gitignore 是 Git 版本库忽略文件。在这个文件中列出的文件和目录都将不会被 Git 追踪。
忽略文件中的内容：
# Node node_modules # Build dist/
这个忽略文件，确保了 node_modules 和 dist 目录不会被 Git 追踪。
public/index.html
index.html 是我们的启动文件。它是一个基本的 HTML 文件，其中包含一个空的 body 和一个引用 React 应用程序的 div。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------ -----------
-------
------
---- ----------------
-------
-------src/index.js
index.js 是我们的应用程序入口点。它是用 React 编写的，主要用于渲染应用程序的根组件。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(
<App />,
document.getElementById('root')
);开发
在开发项目时，可以使用以下命令启动开发服务器：
npm run start
这个命令将启动一个本地 web 服务器，并在浏览器中打开你的应用程序。当你修改代码时，它可以自动重新编译和刷新浏览器。
构建
使用以下命令进行生产构建：
npm run build
这个命令将生成所有的构建文件，并将它们放置在 dist/ 目录下。dist/ 目录包含一个 index.html 文件和一个或多个 JavaScript 文件。将这些文件部署到 Web 服务器上即可。
总结
通过我们的介绍，你应该能够了解 npm 包 init-skeleton 的安装和使用，以及它的文件目录和文件介绍，能够知道如何启动开发服务器和为生产构建做准备。从中我们也深刻理解到一个项目的组成，它是由多个文件组成，每个文件都具有特定的功能，我们需要根据项目的需求进行组合，才能得到一个完整的项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/68734