如何为 React 教程项目使用 NPM Start
介绍
建立一个新的 React 项目曾经是一个巨大的挑战，因为在编写一行代码之前，需要安装很多依赖项、配置文件和其他设置。这时，Facebook 发布的 create-react-app 工具就派上用场了。它可以帮助您在几分钟内建立一个新的 React 项目。该工具整合了所有常见的依赖项，因此开发人员不必担心配置问题，而只需专注于开发 React 代码本身。让我们看看如何使用这个工具。
安装 create-react-app
在你的机器上安装了 NodeJS/NPM 后，你只需运行以下命令：
npm install -g create-react-app
建议全局安装 create-react-app，以便可以在任何位置使用它并创建多个 React 项目。
创建新的 React 应用
现在我们已经安装了 create-react-app，我们可以通过简单地运行以下命令来创建一个新的应用程序：
create-react-app my-react-tutorial-app
cd my-react-tutorial-app
上述操作将创建一个新目录 my-react-tutorial-app，并将包含我们应用程序的样板。
项目布局应如下所示：
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
上面，我们看到了应用程序所需的基本文件。create-react-app 仅帮助创建前端构建管道，并不真正关心后端。我们可以为我们创建的应用程序使用任何我们想要的后端。create-react-app 还在后台使用 Babel 和 Webpack。但对于我们这里的需求来说，了解 Babel 或 Webpack 的工作原理并不是必不可少的。
package.json 是什么样的？
让我们看一下该命令生成的 package.json。
{
"name": "my-react-tutorial-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2",
},
"devDependencies": {
"react-scripts": "1.0.7"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
这里，我们有以下属性：
- name - 包含我们传递给 create-react-app 的应用程序名称。
- 版本——显示当前版本。
- 依赖项 - 显示我们的应用所需的所有模块/版本。默认情况下，npm 将安装最新的主要版本。
- devDependencies - 显示在开发环境中测试应用程序的所有模块/版本。
- scripts - 具有别名，可用于以高效的方式访问 react-scripts 命令。例如，在命令行中运行 npm build 实际上会在后台运行“react-scripts build”。
节点模块
如果我们查看 node_modules，我们会发现它包含我们的 React 应用所需的所有“依赖项”和“devDependencies”。这些内容在我们的 package.json 文件中指定或显示。如果我们只运行 ls -l 命令，我们将看到近 700 - 800 个子目录。此目录被添加到 .gitignore，因此它实际上并没有被上传/发布。此外，一旦我们最小化或压缩我们的代码以进行生产，我们的基本教程应用程序将不会超过 100 KB。
公共目录
此文件夹包含所有将直接提供的资产，无需 Webpack 进行任何额外处理。index.html 是我们教程项目/应用程序的入口点。我们还可以看到一个图标（或标题图标）和 manifest.json。
该清单文件为我们的 Web 应用程序提供了配置，并显示了该应用程序添加到任何移动用户的主屏幕后的行为。
构建并运行我们的应用程序
现在我们已经创建了文件夹 my-react-tutorial-app ，让我们进入该文件夹：
cd my-react-tutorial-app
然后我们可以运行以下命令：
npm run build
这会将我们的生产应用程序构建到 build 目录中。 “build” 文件夹将包含可在任何 Web 服务器上直接使用的所有静态文件。此外，build 命令将我们的源代码转换为浏览器可以理解的代码。它为此使用了 Babel，并且文件经过优化以获得最佳性能。我们所有的 JS 文件都捆绑到一个压缩文件中，甚至 HTML/CSS 代码也经过压缩，以显著减少客户端浏览器上的下载时间。
npm start
这将以开发模式运行我们的应用程序。我们可以在任何浏览器中导航到http:localhost:3000来实时预览我们的应用程序。只要检测到源文件中的任何代码更改，页面就会自动重新加载。控制台中还可以看到警告和错误。
在内部，npm start 使用 webpack dev server 来启动一个开发服务器，以便我们可以与其通信。
npm test
此命令将以交互方式运行测试。默认配置是运行与上次提交后更新的文件相关的测试。
喷射
使用 create-react-app 创建新应用时，我们的所有构建设置实际上都由该工具预先配置。因此，我们无法对构建设置进行任何更新，例如，我们无法访问 webpack.config 文件。它实际上由“react-scripts”构建依赖项管理。但有一种方法可以自定义设置，而不受 Create React App 提供的配置的限制。为此，我们只需执行以下命令：
npm run eject
弹出将使我们能够完全控制配置文件以及 Webpack/Babel/ESLint 等依赖项。弹出实际上会分叉 Create React 应用程序配置并将其移动到我们的应用程序中。运行弹出命令后，我们可以看到在我们的项目中创建了一个“config”文件夹，其中包含用于开发和生产的 webpack.config 文件以及 webpackDevServer.config 文件。此外，我们可以看到在 package.json 中，单个构建依赖项 react-scripts 已从我们的教程项目中删除，并且列出了所有单独的依赖项。
但是，请注意，运行弹出是一个不可逆的步骤或操作。即，运行此命令后我们无法恢复或返回到初始状态。
弹出后，我们可以继续正常使用我们的应用程序，并且上面讨论的所有命令都将起作用（构建、启动和测试）。但是，我们现在负责配置。因此，如果我们对配置或依赖项不太了解，最好避免使用弹出。至少对于教程项目，最好不要使用它。
作为参考，运行 jet 命令后 package.json 的样子如下：
{
"name": "my-react-tutorial-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/core": "7.1.0",
"@svgr/webpack": "2.4.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "9.0.0",
"babel-jest": "23.6.0",
"babel-loader": "8.0.4",
"babel-plugin-named-asset-import": "^0.2.2",
"babel-preset-react-app": "^5.0.2",
"bfj": "6.1.1",
"case-sensitive-paths-webpack-plugin": "2.1.2",
"chalk": "2.4.1",
"css-loader": "1.0.0",
"dotenv": "6.0.0",
"dotenv-expand": "4.2.0",
"eslint": "5.6.0",
"eslint-config-react-app": "^3.0.3",
"eslint-loader": "2.1.1",
"eslint-plugin-flowtype": "2.50.1",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jsx-a11y": "6.1.1",
"eslint-plugin-react": "7.11.1",
"file-loader": "2.0.0",
"fs-extra": "7.0.0",
"html-webpack-plugin": "4.0.0-alpha.2",
"identity-obj-proxy": "3.0.0",
"jest": "23.6.0",
"jest-pnp-resolver": "1.0.1",
"jest-resolve": "23.6.0",
"mini-css-extract-plugin": "0.4.3",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.1.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-preset-env": "6.0.6",
"postcss-safe-parser": "4.0.1",
"react": "^16.5.2",
"react-app-polyfill": "^0.1.3",
"react-dev-utils": "^6.0.3",
"react-dom": "^16.5.2",
"resolve": "1.8.1",
"sass-loader": "7.1.0",
"style-loader": "0.23.0",
"terser-webpack-plugin": "1.1.0",
"url-loader": "1.1.1",
"webpack": "4.19.1",
"webpack-dev-server": "3.1.9",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "3.6.2"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"resolver": "jest-pnp-resolver",
"setupFiles": [
"react-app-polyfill/jsdom"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx}"
],
"testEnvironment": "jsdom",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$",
"^.+\\.module\\.(css|sass|scss)$"
<span class=免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~