• V0_398650
    了解作者
  • 310.7KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-04-20 06:28
    上传日期
Webpack入门套件 克隆此仓库 没错,克隆不是分叉。 您将多次使用此存储库,但是只能分叉一次存储库。 因此,您需要执行以下操作来克隆存储库,但仍然能够将更改推送到您的存储库: 克隆此仓库。 由于您不想将您的项目命名为“ webpack-starter-kit”,因此在运行git clone时可以使用一个可选参数(用终端命令参数替换[...] ): git clone [remote-address] [what you want to name the repo] 删除默认的远程: git remote rm origin (注意git remote -v不会给您任何回报) 在GitHub上创建一个名称为[what you want to name the repo] ,以便与命名保持一致 复制您将用于克隆此存储库的地址-类似于git@github.com:... 将此远程添加
refactorTractor-main.zip
  • refactorTractor-main
  • src
  • images
  • person walking on path.jpg
    66.1KB
  • The Rock.jpg
    9.4KB
  • data
  • activity.js
    618.8KB
  • hydration.js
    355.6KB
  • fakeData.js
    18.2KB
  • users.js
    12.9KB
  • sleep.js
    486.3KB
  • css
  • reset.scss
    1.1KB
  • _variables.scss
    239B
  • _userDash.scss
    1.2KB
  • _activityColumn.scss
    1.1KB
  • _mediaQueries.scss
    954B
  • style.scss
    2.6KB
  • _hydrationColumn.scss
    818B
  • base.scss
    336B
  • _reset.scss
    1.1KB
  • _sleepColumn.scss
    648B
  • index.html
    9.6KB
  • User-repo.js
    3.5KB
  • User.js
    542B
  • scripts.js
    22.2KB
  • Activity.js
    5.2KB
  • Hydration.js
    1KB
  • index.js
    516B
  • Sleep.js
    2.9KB
  • api.js
    903B
  • test
  • .DS_Store
    6KB
  • hydration-test.js
    2.2KB
  • activity-test.js
    6.1KB
  • user-test.js
    2.8KB
  • userrepo-test.js
    3.9KB
  • sleep-test.js
    2.6KB
  • .eslintrc
    937B
  • .DS_Store
    6KB
  • webpack.config.js
    961B
  • gh-pages-procedure.md
    2.3KB
  • README.md
    5.4KB
  • .gitignore
    1.1KB
  • pull_request_template.md
    70B
  • package-lock.json
    361.6KB
  • package.json
    952B
内容介绍
# Webpack Starter Kit ## Clone This Repo That's right, _clone_ not fork. You will use this repo multiple times, but you can only fork a repository once. So here is what you need to do to clone the repo and still be able to push changes to your repo: 1. Clone down this repo. Since you don't want to name your project "webpack-starter-kit", you can use an optional argument when you run `git clone` (you replace the `[...]` with the terminal command arguments): `git clone [remote-address] [what you want to name the repo]` 1. Remove the default remote: `git remote rm origin` (notice that `git remote -v` not gives you back nothing) 1. Create a new repo on GitHub with the name of `[what you want to name the repo]` to be consistent with naming 1. Copy the address that you would use to clone down this repo - something like `git@github.com:...` 1. Add this remote to your cloned down repo: `git remote add origin [address you copied in the previous step]` - do not include the brackets Now try to commit something and push it up to your new repo. If everything is setup correctly, you should see the changes on GitHub. ## Setup After one person has gone through the steps of cloning down this repo and editing the remote, everyone should clone down the repo. Then install the library dependencies. Run: ```bash npm install ``` To verify that it is setup correctly, run `npm start` in your terminal. Go to `http://localhost:8080/` and you should see a page with some `h1` text and a pink background. If that's the case, you're good to go. Enter `control + c` in your terminal to stop the server at any time. ## Where to Add Your Code ### JavaScript You have to be very intentional with where you add your feature code. This repo uses a tool called [webpack](https://webpack.js.org/) to combine many JavaScript files into one big file. Webpack enables you to have many, separate JavaScript files to keep your code organized and readable. Webpack expects all of your code files to be in a specific place, or else it doesn't know how to combine them all behind the scenes. **Create all of your feature code files in the `src` directory.** Since code is separated into multiple files, you need to use the `import` and `export` syntax to share code across file. Here is a video that walks through some information about [import and export](https://www.youtube.com/watch?v=_3oSWwapPKQ). There are a lot of resources out there about `import` and `export`, and resources will sometimes call them `ES6 modules`. It's something you will see in React and beyond. ### HTML Add the HTML you need in the `index.html` file in the `./src` directory. There is some boilerplate HTML that exists from the start that you can modify. ### CSS (SCSS/SASS) This project is setup to use SCSS/SASS files by default instead of your regular CSS files. Add your SCSS files in the `src/css` directory. There is a `base.scss` file already there, but you can change this file and add multiple SCSS files in this directory. This might sound weird, but you need to `import` your SCSS files in the JavaScript entry file (`index.js`) for the styles to be applied to your HTML. The example `base.scss` file has already been imported in the JavaScript entry file as an example. ### Images Add your image files in the `src/images` directory. Similar to CSS files, you need to `import` image files in the JavaScript entry file (`index.js`). Then go into the HTML and add an `img` element with the `src` attribute pointing to the `images` directory. There is an example in the `index.html` file for you to see. ## How to View Your Code in Action In the terminal, run: ```bash npm start ``` You will see a bunch of lines output to your terminal. One of those lines will be something like: ```bash Project is running at http://localhost:8080/ ``` Go to `http://localhost:8080/` in your browser to view your code running in the browser. --- ## Test Files Organization Similar to feature code, your test code needs to be put in a specific place for it to run successfully. **Put all of your test files in the `test` directory.** As a convention, all test filenames should end with `-test.js`. For instance: `box-test.js`. ## Running Your Tests Run your test suite using the command: ```bash npm test ``` The test results will output to the terminal. --- ## Linting Your Code Run the command in your terminal `npm run lint` to run the linter on your JavaScript code. There will be errors and warnings right from the start in this starter kit - the linter is still running successfully. Your linter will look at the JavaScript files you have within the `src` directory and the `test` directory. ## Webpack? If you look in the `package.json` file, you'll see one of the library dependencies called `webpack`. If you're interested in learning more about what Webpack is and how it works behind the scenes, take a look through the [Webpack configuration documentation](https://webpack.js.org/concepts/). ## Deploying to GitHub Pages _If you are finished with the functionality and testing of your project_, then you can consider deploying your project to the web! This way anyone can play it without cloning down your repo. [GitHub Pages](https://pages.github.com/) is a great way to deploy your project to the web. Don't worry about this until your project is free of bugs and well tested! If you _are_ done, you can follow [this procedure](./gh-pages-procedure.md) to get your project live on GitHub Pages.
评论
    相关推荐
    • test-fest-2021:TestFest 2021上用于重构遗留代码实时编码会话的存储
      测试节2021 TestFest 2021上用于重构遗留代码实时编码会话的存储
    • 图像重构压缩.zip
      基于小波-OMP算法的图像压缩传感恢复,有图像,有数据,有代码,有文章!运行可靠!基于小波-OMP算法的图像压缩传感恢复,有图像,有数据,有代码,有文章!运行可靠!
    • FizzBuzz-Refactor:原始fizzbuzz存储库的重构版本,并添加了用户定义的编号
      FizzBu​​zz重构 原始fizzbuzz存储库的重构版本,并添加了用户定义的编号
    • 重构拖拉机
      复制此存储库的代码,并在控制台中git clone 。 CD放入新文件夹。 运行npm install然后npm start 在浏览器中:导航到 用户说明: 作为用户,您可以选择要查看哪种类型的信息,因为有很多可用的信息。 您的统计...
    • 代码重构
      代码重构 这个存储库是我参加的一个编码训练营的作业和活动的集合。 作业
    • 重构分布式系统
      重构分布式系统 没有异常处理 110个随机错误 已存储5733个订单 错过了67笔付款 未发送88封邮件 21由邮件错误引起 67由付款错误引起 错过110项巴士活动 22由总线错误引起 21由邮件错误引起 67由付款错误引起 { " ...
    • 重构:带有重构示例的存储
      重构 带有重构示例的存储
    • RefactoringPresentation:Android重构
      存储库提供了专门针对android重构的提示和技巧。 我为我的android重构演示文稿之一准备了源代码。 它是通过应用重构规则来改善现有android代码的信息源。 这是此演示文稿代码的包结构:#Comments.java此类提供...
    • 重构任务
      重构程序员测试 在此存储库中,包含有关Refactory程序员测试的答案,对于给出的问题,可以在每个答案文件夹中看到,也可以按照下面的链接进行操作 任务文件链接
    • GaussDB_100_1.0.1-DATABASE-REDHAT-64bit.tar.gz
      guassdb100在redhat上安装包,单机部署的包,安装步骤请看我的文中介绍,经过大量实验搭建总结出来的文档