├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── feature_request.md │ └── question.md ├── .gitignore ├── .npmrc ├── .travis.yml ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── docusaurus ├── docs │ ├── adding-images.md │ ├── adding-new-webpack-plugins.md │ ├── adding-pages.md │ ├── adding-stylesheets.md │ ├── assets │ │ ├── development-environment-console.png │ │ ├── install-dependency.gif │ │ ├── remove-dependency.gif │ │ ├── upgrade-dependency.gif │ │ └── web-console-dependencies.png │ ├── available-scripts.md │ ├── awesome-plugins.md │ ├── custom-template.md │ ├── dynamic-import.md │ ├── features.md │ ├── folder-structure.md │ ├── getting-started.md │ ├── http-proxy.md │ ├── http-proxy.zh-CN.mdx │ ├── managing-dependencies.md │ ├── plugin-template.md │ ├── post-processing-css.md │ ├── public-path.md │ ├── rocketact-plugin-bundle-analyzer.md │ ├── rocketact-plugin-polyfill.md │ ├── supported-browsers-features.md │ └── what-is-the-plugin.md └── website │ ├── README.md │ ├── core │ └── Footer.js │ ├── package.json │ ├── pages │ └── en │ │ ├── help.js │ │ ├── index.js │ │ └── users.js │ ├── sidebars.json │ ├── siteConfig.js │ └── static │ ├── css │ ├── code-block-buttons.css │ ├── custom.css │ └── scrollspy.css │ ├── img │ ├── create.gif │ ├── create.svg │ ├── favicon.png │ ├── favicon │ │ └── favicon.ico │ ├── install-dependency.gif │ ├── oss_logo.png │ └── rocketact.png │ └── js │ ├── code-block-buttons.js │ ├── hotjar.js │ └── scrollspy.js ├── jest.config.js ├── jest.setup.js ├── lerna.json ├── logo.png ├── package.json ├── packages ├── babel-preset-rocketact │ ├── LICENSE │ ├── README.md │ ├── index.js │ ├── lib │ │ └── create.js │ └── package.json ├── rocketact-dev-utils │ ├── .gitignore │ ├── .npmignore │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ ├── checkPackageInstalled.ts │ │ ├── clearConsole.ts │ │ ├── ensureTrailingSlash.ts │ │ ├── getValidEntries.ts │ │ ├── index.ts │ │ ├── isPlugin.ts │ │ ├── log.ts │ │ ├── packageUtil.ts │ │ ├── paths.ts │ │ ├── removeTrailingSlash.ts │ │ └── safeResolve.ts │ ├── test │ │ ├── ensureTrailingSlash.spec.ts │ │ ├── fixture │ │ │ ├── hasValidEntry │ │ │ │ └── src │ │ │ │ │ └── pages │ │ │ │ │ ├── a.html │ │ │ │ │ ├── a.js │ │ │ │ │ ├── b.html │ │ │ │ │ ├── b.jsx │ │ │ │ │ ├── c.html │ │ │ │ │ ├── c.ts │ │ │ │ │ ├── d.html │ │ │ │ │ └── d.tsx │ │ │ └── noValidEntry │ │ │ │ └── src │ │ │ │ └── pages │ │ │ │ ├── a.html │ │ │ │ └── b.js │ │ ├── getValidEntries.spec.ts │ │ ├── isPlugin.spec.ts │ │ └── removeTrailingSlash.spec.ts │ ├── tsconfig.json │ └── tslint.json ├── rocketact-plugin-bundle-analyzer │ ├── .gitignore │ ├── LICENSE │ ├── README.md │ ├── index.js │ └── package.json ├── rocketact-plugin-butler │ ├── .gitignore │ ├── LICENSE │ ├── README.md │ ├── index.js │ └── package.json ├── rocketact-plugin-legacy-decorators │ ├── README.md │ ├── index.js │ └── package.json ├── rocketact-plugin-polyfill │ ├── .gitignore │ ├── LICENSE │ ├── README.md │ ├── index.js │ ├── package.json │ ├── polyfill.js │ └── polyfillsPlugin.js ├── rocketact-scripts │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── src │ │ ├── Core.ts │ │ ├── CoreAPI.ts │ │ ├── bin │ │ │ └── rocketact-scripts.ts │ │ ├── commands │ │ │ ├── build.ts │ │ │ └── start.ts │ │ ├── config │ │ │ └── webpack │ │ │ │ ├── basic.ts │ │ │ │ ├── entry.ts │ │ │ │ ├── module.ts │ │ │ │ ├── optimization.ts │ │ │ │ ├── output.ts │ │ │ │ └── plugins.ts │ │ ├── plugins │ │ │ └── console.ts │ │ └── utils │ │ │ ├── convertArgvsToEnv.ts │ │ │ ├── createHtmlWebpackPluginInstance.ts │ │ │ └── environment.ts │ ├── test │ │ ├── e2e │ │ │ ├── simple.spec.ts │ │ │ └── smoke.spec.ts │ │ ├── fixture │ │ │ └── simple │ │ │ │ ├── .gitignore │ │ │ │ ├── package.json │ │ │ │ ├── postcss.config.js │ │ │ │ └── src │ │ │ │ ├── assets │ │ │ │ └── logo.png │ │ │ │ └── pages │ │ │ │ ├── Counter.tsx │ │ │ │ ├── simple.html │ │ │ │ ├── simple.scss │ │ │ │ └── simple.tsx │ │ └── unit │ │ │ ├── Core.spec.ts │ │ │ ├── CoreAPI.spec.ts │ │ │ └── convertArgvsToEnv.spec.ts │ ├── tsconfig.json │ └── types │ │ └── global.d.ts ├── rocketact-web-console │ ├── .gitignore │ ├── .prettierrc │ ├── README.md │ ├── package.json │ ├── src │ │ ├── client │ │ │ ├── api │ │ │ │ └── index.ts │ │ │ ├── app.html │ │ │ ├── app.scss │ │ │ ├── app.tsx │ │ │ ├── components │ │ │ │ ├── GlobalLoadingModal.tsx │ │ │ │ ├── Loading.tsx │ │ │ │ ├── PackageInstaller.scss │ │ │ │ ├── PackageInstaller.tsx │ │ │ │ ├── ProxyRulesTable.tsx │ │ │ │ └── SiderMenu.tsx │ │ │ ├── routes │ │ │ │ ├── apiProxy.tsx │ │ │ │ ├── dependencies.tsx │ │ │ │ └── pages.tsx │ │ │ ├── services │ │ │ │ └── SearchService.ts │ │ │ └── stores │ │ │ │ ├── dependencies.ts │ │ │ │ └── globalLoading.ts │ │ ├── index.ts │ │ └── server │ │ │ ├── dependenciesAPI.ts │ │ │ ├── pagesAPI.ts │ │ │ ├── projectAPI.ts │ │ │ └── proxyAPI.ts │ ├── tsconfig-server.json │ ├── tsconfig.json │ ├── types │ │ └── global.d.ts │ └── webpack.config.js └── rocketact │ ├── .editorconfig │ ├── .gitignore │ ├── .npmignore │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ ├── @types │ │ └── global.d.ts │ └── bin │ │ └── rocketact.ts │ ├── template │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── .prettierignore │ ├── @types │ │ └── images.d.ts │ ├── README.md │ ├── package.json │ ├── postcss.config.js │ ├── public │ │ └── favicon.png │ ├── src │ │ ├── components │ │ │ └── Welcome │ │ │ │ ├── Welcome.scss │ │ │ │ ├── Welcome.tsx │ │ │ │ ├── index.ts │ │ │ │ └── logo.svg │ │ ├── pages │ │ │ ├── app.html │ │ │ ├── app.scss │ │ │ └── app.tsx │ │ └── styles │ │ │ └── reset.scss │ └── tsconfig.json │ ├── tsconfig.json │ └── tslint.json └── yarn.lock /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🐛 Bug Report 3 | about: Did something not work? 4 | title: "[Bug] " 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | # 🐛 bug report 10 | 11 | **Describe the bug** 12 | A clear and concise description of what the bug is. 13 | 14 | **To Reproduce** 15 | Steps to reproduce the behavior: 16 | 1. 17 | 2. 18 | 3. 19 | 4. 20 | 21 | **Expected behavior** 22 | A clear and concise description of what you expected to happen. 23 | 24 | **Screenshots** 25 | If applicable, add screenshots to help explain your problem. 26 | 27 | **Environment (please complete the following information):** 28 | - OS: 29 | - Node Version: 30 | - Version: 31 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🌈 Feature 3 | about: What cool thing would you like to add? 4 | title: "[Feature Request]" 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | # 🌈 Feature 11 | 12 | **Is your feature request related to a problem? Please describe.** 13 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 14 | 15 | **Describe the solution you'd like** 16 | A clear and concise description of what you want to happen. 17 | 18 | **Describe alternatives you've considered** 19 | A clear and concise description of any alternative solutions or features you've considered. 20 | 21 | **Additional context** 22 | Add any other context or screenshots about the feature request here. 23 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/question.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: ❔ Question 3 | about: Have any questions? 4 | --- 5 | 6 | # ❔ Question 7 | 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | lerna-debug.log 3 | .DS_Store 4 | 5 | docusaurus/website/translated_docs 6 | docusaurus/website/build/ 7 | docusaurus/website/yarn.lock 8 | docusaurus/website/node_modules 9 | docusaurus/website/i18n/* 10 | *.tsbuildinfo 11 | .vscode 12 | .idea 13 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "10" 4 | - "11" 5 | - "12" 6 | - "13" 7 | - "14" 8 | cache: yarn 9 | script: 10 | - yarn bootstrap 11 | - cd packages/rocketact-scripts/test/fixture/simple/ 12 | - yarn 13 | - cd - 14 | - yarn build 15 | - yarn test 16 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at ylzcylx@gmail.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## How to contribute to Rocketact 2 | 3 | ### Do you find a bug? 4 | 5 | - **Ensure the bug was not already reported** by searching on GitHub under [Issues](https://github.com/jdf2e/rocketact/issues). 6 | - If you're unable to find an open issue addressing the problem, [open a new one](https://github.com/jdf2e/rocketact/issues/new/choose). **Be sure to include a title and clear description, as much relevant information as possible.** 7 | 8 | ### Do you want to contribute to the source code? 9 | 10 | Use Node >= 10 version as **development environment**. 11 | 12 | #### Prepare workspace 13 | 14 | ```bash 15 | git clone https://github.com/jdf2e/rocketact.git 16 | cd rocketact 17 | yarn && yarn bootstrap 18 | cd packages/rocketact-scripts/test/fixture/simple/ && yarn && cd - 19 | ``` 20 | 21 | #### Build 22 | 23 | ```bash 24 | yarn build 25 | # or build a specific package 26 | yarn build -- --scope rockeatct 27 | ``` 28 | 29 | #### Running tests 30 | 31 | ```bash 32 | yarn test 33 | # or start watch mode 34 | yarn test -- --watch 35 | ``` 36 | 37 | #### Commit changes 38 | 39 | ```bash 40 | yarn commit 41 | ``` 42 | 43 | ### Do you want to contribute to the Rocketact documentation? 44 | 45 | Rocketact uses [Docusaurus](https://docusaurus.io/) to maintain its [documentation](https://rocketact.js.org). 46 | 47 | If you want to preview the website locally, you can: 48 | 49 | ```bash 50 | cd docusaurus/website 51 | yarn 52 | yarn start 53 | ``` 54 | 55 | Changes made to the documentation files will be reloaded into browser. 56 | 57 | ----- 58 |

❤️❤️❤️ Thanks! ❤️❤️❤️

-------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 JD.com 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docusaurus/docs/adding-images.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: adding-images 3 | title: Adding Images 4 | --- 5 | 6 | ## Reference Images in Components 7 | 8 | In components, you can `import` images just like importing another JavaScript module. Once imported, you can use the imported value as the `src` prop of an image. 9 | 10 | Here is an example: 11 | 12 | ```jsx 13 | import * as React from 'react'; 14 | import * as ReactDOM from 'react-dom'; 15 | 16 | import logo from './rocketact.png'; 17 | 18 | ReactDOM.render( 19 |
20 |
21 | 22 |
23 |
, 24 | document.getElementById('app') 25 | ); 26 | ``` 27 | 28 | By referencing images this way, Webpack will include the image in the final bundles and will handle `publicPath` and hashes properly. 29 | 30 | ## Reference Images in CSS 31 | 32 | Nothing special here, just reference the image through relative paths and Webpack will replace theme with final paths. 33 | 34 | ```css 35 | .logo { 36 | background: url(./rocketact.png); 37 | } 38 | ``` -------------------------------------------------------------------------------- /docusaurus/docs/adding-new-webpack-plugins.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: adding-new-webpack-plugins 3 | title: Adding New Webpack Plugins 4 | --- 5 | 6 | Another one 7 | -------------------------------------------------------------------------------- /docusaurus/docs/adding-pages.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: adding-pages 3 | title: Adding Pages 4 | --- 5 | 6 | If your project is a multi-pages application and you want to add a new page. All you need to do is creating two new files(`.tsx` and `.html`) in `src/pages` folder. **Just make sure they share the same filename** so that Rocketact can detect the new page. 7 | 8 | 9 | ```bash 10 | ├── src 11 | │   ├── pages 12 | │   │   ├── home.html 13 | │   │   ├── home.tsx 14 | │   │   ├── list.html 15 | │   │   ├── list.tsx 16 | │   │   ├── detail.html 17 | │   │   ├── detail.tsx 18 | │   │   ├── search.html 19 | │   │   ├── search.tsx 20 | │   │   ├── profile.tsx 21 | │   │   └── profile.html 22 | ``` 23 | -------------------------------------------------------------------------------- /docusaurus/docs/adding-stylesheets.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: adding-stylesheets 3 | title: Adding Stylesheets 4 | --- 5 | 6 | We use [Webpack](https://webpack.js.org/) for bundling all assets used in the project. You can tell Webpack to compile a specific CSS file by importing that CSS file in your React component. 7 | 8 | __`Button.tsx`__ 9 | 10 | ```jsx 11 | import React from 'react'; 12 | import './Button.css' 13 | 14 | export default class Button extends React.Component { 15 | render
16 | } 17 | ``` 18 | 19 | __`Button.css`__ 20 | 21 | ```css 22 | .button { 23 | padding: 20px; 24 | } 25 | ``` 26 | 27 | ## Want to use Sass? 28 | 29 | No problem! The project has Sass preprocessor configured out of the box. All you need is to rename `Button.css` to `Button.scss` and update the `import` statement in you React component. -------------------------------------------------------------------------------- /docusaurus/docs/assets/development-environment-console.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jdf2e/rocketact/a94b099ed4ed2917efa055671ccb2e89a3d9bc97/docusaurus/docs/assets/development-environment-console.png -------------------------------------------------------------------------------- /docusaurus/docs/assets/install-dependency.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jdf2e/rocketact/a94b099ed4ed2917efa055671ccb2e89a3d9bc97/docusaurus/docs/assets/install-dependency.gif -------------------------------------------------------------------------------- /docusaurus/docs/assets/remove-dependency.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jdf2e/rocketact/a94b099ed4ed2917efa055671ccb2e89a3d9bc97/docusaurus/docs/assets/remove-dependency.gif -------------------------------------------------------------------------------- /docusaurus/docs/assets/upgrade-dependency.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jdf2e/rocketact/a94b099ed4ed2917efa055671ccb2e89a3d9bc97/docusaurus/docs/assets/upgrade-dependency.gif -------------------------------------------------------------------------------- /docusaurus/docs/assets/web-console-dependencies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jdf2e/rocketact/a94b099ed4ed2917efa055671ccb2e89a3d9bc97/docusaurus/docs/assets/web-console-dependencies.png -------------------------------------------------------------------------------- /docusaurus/docs/available-scripts.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: available-scripts 3 | title: Available Scripts 4 | --- 5 | 6 | ## `npm start` or `yarn start` 7 | 8 | Start local development environment. 9 | 10 | Once started, you will see a similar console: 11 | 12 | ![](assets/development-environment-console.png) 13 | 14 | The port may be different depending on whether another process is using 3000 port. 15 | 16 | In the development environment, changes made to JavaScript module and SCSS/CSS files will trigger a fully page reload automaticly. 17 | 18 | ### Commandline Options 19 | 20 | #### `--port` 21 | 22 | > Available since Rocketact 1.6.0 23 | 24 | Allow developer specify a preferred port for development environment. 25 | 26 | Corresponding environment variable: `PORT`. 27 | 28 | For example: 29 | 30 | ```bash 31 | yarn start -- --port 80 32 | # or 33 | PORT=80 yarn start 34 | ``` 35 | 36 | ## `npm run build` or `yarn build` 37 | 38 | Perform a production build. 39 | 40 | During the production build, all text assets (JavaScript / CSS files) will be minified and hashes are added to file names for long-term caching. 41 | 42 | All emitted assets will be saved to `build` folder. 43 | 44 | ### Commandline Options 45 | 46 | #### `--no-hash` 47 | 48 | > Available since Rocketact 1.5.0 49 | 50 | This will remove the `hash` part in the filenames of a production build. 51 | 52 | Corresponding environment variable: `NO_HASH`. 53 | 54 | For example: 55 | 56 | ```bash 57 | yarn build -- --no-hash 58 | # or 59 | NO_HASH=true yarn build 60 | ``` 61 | 62 | #### `--https` 63 | 64 | > Available since Rocketact-Scripts 1.9.3 65 | 66 | This supports [webpack dev server mode](https://webpack.js.org/configuration/dev-server/#devserverhttps). 67 | 68 | Corresponding environment variable: `HTTPS`. 69 | 70 | For example: 71 | 72 | ```bash 73 | yarn build -- --https 74 | # or 75 | HTTPS=true yarn build 76 | ``` 77 | 78 | #### `--sourcemap` 79 | 80 | > Available since Rocketact 1.10.1 81 | 82 | This will generate sourcemap files for `*.(t|j)s` which in current project. 83 | 84 | `Rocketact@1.x` dependencies `Webpack@4.x` and [`terser-webpack-plugin@4.2.3`](https://github.com/webpack-contrib/terser-webpack-plugin/tree/v4.2.3#sourcemap). 85 | 86 | > terser-webpack-plugin@5.x no longer supported webpack@4.x [https://github.com/webpack-contrib/terser-webpack-plugin/releases/tag/v5.0.0](https://github.com/webpack-contrib/terser-webpack-plugin/releases/tag/v5.0.0) 87 | 88 | More Powerful ability for generating sourcemap files, please use other webpack plugins. 89 | 90 | Corresponding environment variable: `SOURCEMAP`. 91 | 92 | For example: 93 | 94 | ```bash 95 | yarn build -- --sourcemap 96 | # or 97 | SOURCEMAP=true yarn build 98 | `` 99 | ``` 100 | -------------------------------------------------------------------------------- /docusaurus/docs/awesome-plugins.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: awesome-plugins 3 | title: Awesome Plugins 4 | --- 5 | 6 | ## Awesome Plugins 7 | 8 | | Name | Description | 9 | | ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | 10 | | [rocketact-plugin-yep-react](https://www.npmjs.com/package/rocketact-plugin-yep-react) | support [yep-react](https://yep-react.jd.com/) ui components lib | 11 | | [rocketact-plugin-icons-react](https://www.npmjs.com/package/rocketact-plugin-icons-react) | support @jdcfe/icons-react use svg | 12 | | [rocketact-plugin-bundle-with-banner](https://www.npmjs.com/package/rocketact-plugin-bundle-with-banner) | bundle with banner | 13 | | [rocketact-plugin-bundle-with-version](https://www.npmjs.com/package/rocketact-plugin-bundle-with-version) | bundle with version which in package.json | 14 | | [rocketact-plugin-jdc-practices](https://www.npmjs.com/package/rocketact-plugin-jdc-practices) | jdc fe team practices | 15 | 16 | Thanks for contributing these awesome plugins, you can find more awesome plugins from npm [query link](https://www.npmjs.com/search?q=rocketact-plugin). 17 | -------------------------------------------------------------------------------- /docusaurus/docs/custom-template.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: custom-templates 3 | title: Custom Templates 4 | --- 5 | 6 | > Available since rocketact@0.3.3 7 | 8 | ### Find custom templates 9 | 10 | You can find many other templates by searching for ["rocketact-template-*"](https://www.npmjs.com/search?q=rocketact-template) on npm. 11 | 12 | ### How to build a custom template 13 | 14 | Here some rules you may follow. 15 | 16 | #### Folder Structure 17 | 18 | Custom template's fold structure may like this [Folder Structure#conventionsrestrictions](Folder%20Structure#conventionsrestrictions). 19 | 20 | ex. ``rocketact-template-default`` 21 | 22 | ```shell 23 | . 24 | ├── @types 25 | │   └── images.d.ts 26 | ├── public 27 | │   └── favicon.png 28 | ├── src 29 | │   ├── components 30 | │   │   └── Welcome 31 | │   │   ├── Welcome.scss 32 | │   │   ├── Welcome.tsx 33 | │   │   ├── index.ts 34 | │   │   └── logo.svg 35 | │   ├── pages 36 | │   │   ├── app.html 37 | │   │   ├── app.scss 38 | │   │   └── app.tsx 39 | │   └── styles 40 | │   └── reset.scss 41 | ├── .eslintignore 42 | ├── .eslintrc.js 43 | ├── .gitignore 44 | ├── .prettierignore 45 | ├── README.md 46 | ├── package.json 47 | ├── postcss.config.js 48 | └── tsconfig.json 49 | ``` 50 | 51 | #### Name Definition Rule 52 | 53 | Make sure that package.json's name is starting with ``rocketact-template-``. 54 | 55 | ex. ``package.json`` 56 | 57 | ```json5 58 | { 59 | "name": "rocketact-template-custom", 60 | "version": "0.1.0", 61 | "main": "index.js", 62 | "publicPath": "/", 63 | "scripts": { 64 | "start": "rocketact-scripts start", 65 | "build": "rocketact-scripts build", 66 | "lint": "eslint 'src/**/*.{js,ts,tsx}' --quiet --fix" 67 | }, 68 | "repository": { 69 | "type": "git", 70 | "url": "git repo url" 71 | }, 72 | "author": "author ", 73 | "license": "ISC", 74 | "browserslist": [ 75 | ], 76 | "devDependencies": { 77 | // ... ignore 78 | }, 79 | "dependencies": { 80 | // ... ignore 81 | } 82 | } 83 | ``` 84 | 85 | ```shell 86 | npm publish . 87 | ``` 88 | 89 | #### Done 90 | 91 | Now, you just released a custom template of rocketact. 92 | 93 | #### Install into your project 94 | 95 | ```shell 96 | npx rocketact create my-awsome-app --template custom 97 | ``` 98 | #### Install with version 99 | 100 | Rocketact supports installing a template with a assign version. 101 | 102 | ```shell 103 | npx rocketact create my-awsome-app --template custom@1.0.1 104 | ``` 105 | 106 | ### Constribute 107 | 108 | Welcome all Rocketact's users to contribute custom template for your project or team. 109 | 110 | Npm search link: [rocketact-template-*](https://www.npmjs.com/search?q=rocketact-template). 111 | 112 | [Rocketact Contribute Guide](https://github.com/jdf2e/rocketact/blob/master/CONTRIBUTING.md) -------------------------------------------------------------------------------- /docusaurus/docs/dynamic-import.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: dynamic-import 3 | title: Dynamic Import 4 | --- 5 | 6 | Another one 7 | -------------------------------------------------------------------------------- /docusaurus/docs/features.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: features 3 | title: Features 4 | sidebar_label: Features 5 | --- 6 | 7 | ## Zero Configuration 8 | 9 | 10 | 11 | ## Builtin Support for TypeScript 12 | 13 | ## Builtin Web Console 14 | 15 | ## Fully Configurable -------------------------------------------------------------------------------- /docusaurus/docs/folder-structure.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: Folder Structure 3 | title: Folder Structure 4 | --- 5 | 6 | ## Basic Structure 7 | 8 | Newly created project will contain the following folder structure: 9 | 10 | ```bash 11 | . 12 | ├── @types # project level type definations 13 | │   └── images.d.ts 14 | ├── README.md # project readme 15 | ├── package.json 16 | ├── postcss.config.js # PostCSS configuration. 17 | ├── public # files under this directory will be copied to build directory untouched 18 | │   └── favicon.png 19 | ├── src # all your source code goes here 20 | │   ├── pages 21 | │   │   ├── app.html # HTML template for this page 22 | │   │   ├── app.scss # page level style. not required. 23 | │   │   └── app.tsx # entry file for this page 24 | │   └── styles # gloabl styles shared by multi pages 25 | │   └── reset.scss # global reset style 26 | ├── tsconfig.json # TypeScript configuration. Remove it if you don't use TypeScript 27 | ├── tslint.json # TSLint configuration. Remove it if you do not need TSLint check 28 | └── node_moduels/ 29 | ``` 30 | 31 | ## Conventions/Restrictions 32 | 33 | Rocketact does not rely on your folder structure much. The only convention/restriction is that **entry file** and **HTML template** must have the same filename for the same page and boths resides in `src/pages/` folder. 34 | 35 | For example, you'd like to add a new profile page, all you need to do is creating two new files: 36 | 37 | ```bash 38 | ├── src 39 | │   ├── pages 40 | │   │   ├── app.html 41 | │   │   ├── app.scss 42 | │   │   ├── app.tsx 43 | │   │   ├── profile.tsx # entry file for new page 44 | │   │   └── profile.html # HTML template for new page 45 | ``` 46 | 47 | Then Rocketact should be ready for the new page in both development and production environment. -------------------------------------------------------------------------------- /docusaurus/docs/getting-started.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: getting-started 3 | title: Getting Started 4 | sidebar_label: Getting Started 5 | --- 6 | 7 | Rocketact is a tool that helps you focusing on your code without caring about environment setup or build process configuration. You can start developing a single-page React application or multi-page React application with zero configuration. 8 | 9 | ## Why Not Using Create React App? 10 | 11 | [Create React App](https://facebook.github.io/create-react-app/) **is a great tool** for creating React applications. We have been using it for many internal projects at [JD.com](https://jd.com). But we also found some limitations of CRA in our use case. For example, we can't modify the builtin Webpack configuration in an easy way; we can't use it for a multi-page React application. So we tried to make a similar tool but with more flexibility in both configuration and usage scenario. 12 | 13 | Again, [Create React App](https://facebook.github.io/create-react-app/) **is a great tool** for creating React application and has better community support. You should start with CRA until you know what you really need. 14 | 15 | ## Quick Start 16 | 17 | ```bash 18 | npx rocketact create my-awesome-app 19 | cd my-awesome-app 20 | npm start 21 | ``` 22 | 23 | npx comes with [npm 5.2+](https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner) and higher version. If you are using an older version npm, you can use Rocketact in the following way: 24 | 25 | ```bash 26 | npm install -g rocketact 27 | rocketact create my-awesome-app 28 | cd my-awesome-app 29 | npm start 30 | ``` 31 | 32 | Then open [http://localhost:3000](http://localhost:3000) to see your app. 33 | 34 | ### Start with a customized template 35 | 36 | > Available since rocketact@0.3.3 37 | 38 | Rocketact supports custom template for starting a new project. 39 | 40 | ```bash 41 | npx rocketact create my-awesome-app --template [template-name] 42 | ``` 43 | 44 | Rocketact will help you download `rocketact-template-template-name` and initialize the project. Different from `cra-template-custom`, Rocketact totally ensure all files of the custom template, including `package.json`, `npm scripts` and so on. 45 | 46 | We ship some templates by default. [rocketact-template-default](https://www.npmjs.com/package/rocketact-template-default) 47 | 48 | ex. 49 | 50 | ```bash 51 | npx rocketact create my-awesome-app --template default 52 | ## or with version. Rocketact supports installing a template with a assign version. 53 | npx rocketact create my-awesome-app --template default@1.0.1 54 | ``` 55 | 56 | ## Environment Requirement 57 | 58 | Rocketact requires **Node >= 10**. You can use [nvm](https://github.com/creationix/nvm) (for Mac/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows) (for Windows) to switch between different Node versions on your local machine. 59 | -------------------------------------------------------------------------------- /docusaurus/docs/http-proxy.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: http-proxy 3 | title: Http proxy 4 | --- 5 | 6 | ## How to use devServer.proxy in Rocketact？ 7 | 8 | The reference mode of custom proxy configuration is similar to that of custom plugin. You can create one in the root folder of the project`rocketactProxy.js`File, which exports objects that act directly on`devServer.proxy`Configuration, which fully follows`devServer.proxy`The content can be in the following format: 9 | 10 | ```jsx 11 | module.exports = { 12 | "/api": { 13 | target: "http://localhost:3000", 14 | changeOrigin: true, 15 | }, 16 | }; 17 | ``` 18 | 19 | And then through the package.json Add a new configuration "rocketactproxy" and tell rocketact to load the file: 20 | 21 | ```jsx 22 | "rocketactProxy": "./rocketactProxy.js" 23 | ``` 24 | -------------------------------------------------------------------------------- /docusaurus/docs/http-proxy.zh-CN.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: http-proxy 3 | title: 开发模式下配置代理 4 | --- 5 | 6 | ## 如何在 Rocketact 中自定义 proxy 配置？ 7 | 8 | 自定义代理配置的引用方式和自定义 plugin 的方式类似。你可以在项目的根文件夹中创建一个`rocketactProxy.js`文件，该文件导出的对象将直接作用于`devServer.proxy`配置，其完全遵循`devServer.proxy`的配置规则，其内容可以按如下格式： 9 | 10 | ```jsx 11 | module.exports = { 12 | "/api": { 13 | target: "http://localhost:3000", 14 | changeOrigin: true, 15 | }, 16 | }; 17 | ``` 18 | 19 | 然后通过在 package.json 新增配置`rocketactProxy`，告诉 Rocketact 加载该文件 ： 20 | 21 | ```jsx 22 | "rocketactProxy": "./rocketactProxy.js" 23 | ``` 24 | -------------------------------------------------------------------------------- /docusaurus/docs/managing-dependencies.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: managing-depencencies 3 | title: Managing Dependencies 4 | --- 5 | 6 | In the ["Dependencies" tab](http://dev.jd.com:3000/#/dependencies) of web console, you can view/manage your project dependencies without opening the terminal. 7 | 8 | ![](assets/web-console-dependencies.png) 9 | 10 | ## Upgrading Dependency 11 | 12 | To upgrade a outdated dependency, all you need is to choose the version you want upgrade to and click the "OK" button. 13 | 14 | ![](assets/upgrade-dependency.gif) 15 | 16 | 17 | ## Removing Dependency 18 | 19 | Removing dependency is similar. 20 | 21 | ![](assets/remove-dependency.gif) 22 | 23 | ## Adding New Dependency 24 | 25 | To add a new dependency, open the "Install new dependency" dialog and search the package you want. Then choose whether install it as a main dependency or dev dependency. 26 | 27 | ![](assets/install-dependency.gif) -------------------------------------------------------------------------------- /docusaurus/docs/plugin-template.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: plugin-template 3 | title: Plugin template 4 | --- 5 | 6 | Here is a simple plugin template: 7 | 8 | ```js 9 | module.exports = api => { 10 | api.chainWebpack(webpackChain => { 11 | // Modify the webpack configuration to your needs 12 | }); 13 | 14 | api.registerCommand("commandName", () => { 15 | // Implementation detail 16 | }) 17 | }; 18 | ``` -------------------------------------------------------------------------------- /docusaurus/docs/post-processing-css.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: post-processing-css 3 | title: Post-Processing CSS 4 | --- 5 | 6 | Vender prefixes are automatically add during build through [Autoprefixer](https://github.com/postcss/autoprefixer). 7 | 8 | For example, this: 9 | 10 | ```css 11 | .App { 12 | display: flex; 13 | flex-direction: row; 14 | align-items: center; 15 | } 16 | ``` 17 | 18 | becomes this after build: 19 | 20 | ```css 21 | .App { 22 | display: -webkit-box; 23 | display: -ms-flexbox; 24 | display: flex; 25 | -webkit-box-orient: horizontal; 26 | -webkit-box-direction: normal; 27 | -ms-flex-direction: row; 28 | flex-direction: row; 29 | -webkit-box-align: center; 30 | -ms-flex-align: center; 31 | align-items: center; 32 | } 33 | ``` 34 | 35 | To configure the target browser list, you can adjust the `browserslist` field in `package.json`. 36 | 37 | [Check here](https://github.com/browserslist/browserslist#readme) for a list of all supported query syntax. -------------------------------------------------------------------------------- /docusaurus/docs/public-path.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: public-path 3 | title: Public Path 4 | --- 5 | 6 | The `publicPath` property in `package.json` specifies the path where your bundle files will be deployed to. 7 | 8 | Modify its value according to the actual requirement of your project. 9 | -------------------------------------------------------------------------------- /docusaurus/docs/rocketact-plugin-bundle-analyzer.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: rocketact-plugin-bundle-analyzer 3 | title: rocketact-plugin-bundle-analyzer 4 | --- 5 | 6 | Add [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) intergation for Rocketact projects 7 | 8 | 9 | ## How to use it? 10 | 11 | Simply install `rocketact-plugin-bundle-analyzer` as dev dependency: 12 | 13 | ```bash 14 | yarn add -D rocketact-plugin-bundle-analyzer 15 | # or 16 | npm install --save-dev rocketact-plugin-bundle-analyzer 17 | ``` 18 | 19 | Then everytime you perfom a production bundle. The analysis result will be output to the `build` folder. -------------------------------------------------------------------------------- /docusaurus/docs/rocketact-plugin-polyfill.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: rocketact-plugin-polyfill 3 | title: rocketact-plugin-polyfill 4 | --- 5 | 6 | Automaticlly include polyfills for Rocketact projects. 7 | 8 | Following language features / browser API are included: 9 | 10 | - [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) 11 | - [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) 12 | - [Symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol) 13 | - [Array.from](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from) 14 | - [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) / [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) 15 | - [window.requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) 16 | 17 | 18 | ## How to use it? 19 | 20 | Simply install `rocketact-plugin-polyfill` as dev dependency: 21 | 22 | ```bash 23 | yarn add -D rocketact-plugin-polyfill 24 | # or 25 | npm install --save-dev rocketact-plugin-polyfill 26 | ``` 27 | 28 | And all those polyfills will be automaticlly included in your bundle. No need to modify your code. -------------------------------------------------------------------------------- /docusaurus/docs/supported-browsers-features.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: supported-browsers-features 3 | title: Supported Browsers and Features 4 | --- 5 | 6 | ## Supported Browsers 7 | 8 | The project is configured to support all modern browsers and IE >= 9 by default. 9 | 10 | ## Supported Language Features 11 | 12 | In this project, you can use all the latest JavaScript syntaxs which has been included in the [ECMAScript](https://en.wikipedia.org/wiki/ECMAScript) standard. 13 | 14 | Besides that, the project also supports: 15 | 16 | ### Dynamic Import 17 | 18 | [Dynamic import](https://github.com/tc39/proposal-dynamic-import) is a stage 3 proposal which gives you the ability to dynamicly import an ES module at runtime. 19 | 20 | _Learn more about [different proposal stages](https://tc39.github.io/process-document/)._ 21 | 22 | Here is an example: 23 | 24 | `add.js`: 25 | 26 | ```js 27 | export default (v) => v + 1; 28 | ``` 29 | 30 | `Counter.jsx`: 31 | 32 | ```jsx 33 | class Counter extends React.Component { 34 | constructor() { 35 | super(); 36 | this.state = { 37 | count: 0 38 | }; 39 | 40 | this.onClick = this.onClick.bind(this); 41 | } 42 | 43 | onClick() { 44 | import('./add').then(add => this.setState({ count: add(this.state.count) });) 45 | } 46 | 47 | render() { 48 | return ( 49 |
50 |

51 | {this.state.count} 52 | 53 |

54 |
55 | ); 56 | } 57 | } 58 | ``` 59 | 60 | [Check ths doc](https://reactjs.org/docs/code-splitting.html#reactlazy) on how to leverage `React.lazy` API and dynamic import to do code splitting. 61 | 62 | ### Class Fields 63 | 64 | [Class fields](https://github.com/tc39/proposal-class-fields) is a stage 3 proposal which enables you to write property values outside of the constructor in classes. 65 | 66 | For example, we have `Counter` class: 67 | 68 | ```jsx 69 | class Counter extends React.Component { 70 | constructor() { 71 | super(); 72 | this.state = { 73 | count: 0 74 | }; 75 | 76 | this.onClick = this.onClick.bind(this); 77 | } 78 | 79 | onClick() { 80 | this.setState({count: this.state.count + 1}) 81 | } 82 | 83 | render() { 84 | return ( 85 |
86 |

87 | {this.state.count} 88 | 89 |

90 |
91 | ); 92 | } 93 | } 94 | ``` 95 | 96 | With class fields syntax, we can do this: 97 | 98 | ```jsx 99 | class Counter extends React.Component { 100 | state = { 101 | count: 0 102 | } 103 | 104 | onClick = () => { 105 | this.setState({count: this.state.count + 1}) 106 | } 107 | 108 | render() { 109 | return ( 110 |
111 |

112 | {this.state.count} 113 | 114 |

115 |
116 | ); 117 | } 118 | } 119 | ``` 120 | 121 | _Learn more about [different proposal stages](https://tc39.github.io/process-document/)._ 122 | 123 | 124 | ### JSX and TypeScript 125 | 126 | We highly recommend you start using [TypeScript](https://www.typescriptlang.org/) if you havn't. 127 | 128 | ### Runtime Polyfills 129 | 130 | We have `rocketact-plugin-polyfill` installed as dev dependency be default. This will ensure the following features are present: 131 | 132 | - `Promise` 133 | - `Object.assign` 134 | - `Symbol` 135 | - `Array.from` 136 | - `Map/Set` 137 | - `window.requestAnimationFrame` 138 | 139 | If you still want use any other ES6+ features that need **runtime support**, make sure include the corresponding polyfills manually. -------------------------------------------------------------------------------- /docusaurus/docs/what-is-the-plugin.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: what-is-the-plugin 3 | title: What is the plugin? 4 | --- 5 | 6 | Rocketact leverages various plugins to implements various features. You can think of plugins as the "API" to modify Rocketact's behaviour. 7 | 8 | ## How Rocketact works? 9 | 10 | Rocketact at its core leverages [webpack](https://webpack.js.org/) and [webpack-dev-server](https://github.com/webpack/webpack-dev-server) to handle the bundle operation and development environment. We use [webpack-chain](https://github.com/neutrinojs/webpack-chain) to simplify the management of webpack's configuration. 11 | 12 | Rocketact use plugin APIs internally to [create builtin commands](https://github.com/jdf2e/rocketact/tree/master/packages/rocketact-scripts/src/commands) and [compose webpack configurations](https://github.com/jdf2e/rocketact/tree/master/packages/rocketact-scripts/src/config/webpack). 13 | 14 | ## How plugins works? 15 | 16 | The plugin interface contains three API: 17 | 18 | ### api.registerCommand(subcommand: string, () => Promise\): void 19 | 20 | Register a new sub-command. Then you can run: 21 | 22 | ```bash 23 | npx rocketact-scripts subcommand 24 | ``` 25 | 26 | or configure it in npm scripts. 27 | 28 | The second argument is called without parameters. 29 | 30 | ### api.resolveWebpackConfig(): webpack.Configuration 31 | 32 | Returns a plain webpack configuration object. 33 | 34 | ### api.chainWebpack((webpackChain: Config) => void) 35 | 36 | Use this API to manipulate the default webpack configuration in Rocketact. 37 | 38 | ## How to use a plugin? 39 | 40 | ### Local plugin 41 | 42 | Basiclly, every JavaScript file could be a valid plugin, all you need to do is make sure its exports object is a function accepts the `plugin interface API` as parameter. 43 | 44 | Following is a simple example showing how to configure `babel-plugin-import` for `antd`: 45 | 46 | Create a file named `rocketactPlugin.js` in your project's root folder with following content: 47 | 48 | ```js 49 | const merge = require("babel-merge"); 50 | 51 | module.exports = api => { 52 | api.chainWebpack(webpackChain => { 53 | webpackChain.module 54 | .rule("compile") 55 | .use("babel") 56 | .tap(options => 57 | merge(options, { 58 | plugins: [[require.resolve("babel-plugin-import"), { 59 | "libraryName": "antd", 60 | "style": "css" 61 | }]] 62 | }) 63 | ); 64 | }); 65 | }; 66 | ``` 67 | 68 | Then tell Rocketact to load that file by adding a new `rocketactPlugins` filed in `package.json`: 69 | 70 | ```json 71 | "rocketactPlugins": [ 72 | "./rocketactPlugin" 73 | ] 74 | ``` 75 | 76 | ### Installed plugin 77 | 78 | If you want to share your plugin with other developers. The best way to achieve this is to publish your plugin as a npm package. 79 | 80 | The only restriction is the package name must follow the `rocketact-plugin-` prefix. 81 | 82 | All the plugin users need to do is install it as a dev dependency and no other configuration is needed. -------------------------------------------------------------------------------- /docusaurus/website/README.md: -------------------------------------------------------------------------------- 1 | This website was created with [Docusaurus](https://docusaurus.io/). 2 | 3 | # What's In This Document 4 | 5 | * [Get Started in 5 Minutes](#get-started-in-5-minutes) 6 | * [Directory Structure](#directory-structure) 7 | * [Editing Content](#editing-content) 8 | * [Adding Content](#adding-content) 9 | * [Full Documentation](#full-documentation) 10 | 11 | # Get Started in 5 Minutes 12 | 13 | 1. Make sure all the dependencies for the website are installed: 14 | 15 | ```sh 16 | # Install dependencies 17 | $ yarn 18 | ``` 19 | 2. Run your dev server: 20 | 21 | ```sh 22 | # Start the site 23 | $ yarn start 24 | ``` 25 | 26 | ## Directory Structure 27 | 28 | Your project file structure should look something like this 29 | 30 | ``` 31 | my-docusaurus/ 32 | docs/ 33 | doc-1.md 34 | doc-2.md 35 | doc-3.md 36 | website/ 37 | blog/ 38 | 2016-3-11-oldest-post.md 39 | 2017-10-24-newest-post.md 40 | core/ 41 | node_modules/ 42 | pages/ 43 | static/ 44 | css/ 45 | img/ 46 | package.json 47 | sidebar.json 48 | siteConfig.js 49 | ``` 50 | 51 | # Editing Content 52 | 53 | ## Editing an existing docs page 54 | 55 | Edit docs by navigating to `docs/` and editing the corresponding document: 56 | 57 | `docs/doc-to-be-edited.md` 58 | 59 | ```markdown 60 | --- 61 | id: page-needs-edit 62 | title: This Doc Needs To Be Edited 63 | --- 64 | 65 | Edit me... 66 | ``` 67 | 68 | For more information about docs, click [here](https://docusaurus.io/docs/en/navigation) 69 | 70 | ## Editing an existing blog post 71 | 72 | Edit blog posts by navigating to `website/blog` and editing the corresponding post: 73 | 74 | `website/blog/post-to-be-edited.md` 75 | ```markdown 76 | --- 77 | id: post-needs-edit 78 | title: This Blog Post Needs To Be Edited 79 | --- 80 | 81 | Edit me... 82 | ``` 83 | 84 | For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog) 85 | 86 | # Adding Content 87 | 88 | ## Adding a new docs page to an existing sidebar 89 | 90 | 1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`: 91 | 92 | ```md 93 | --- 94 | id: newly-created-doc 95 | title: This Doc Needs To Be Edited 96 | --- 97 | 98 | My new content here.. 99 | ``` 100 | 101 | 1. Refer to that doc's ID in an existing sidebar in `website/sidebar.json`: 102 | 103 | ```javascript 104 | // Add newly-created-doc to the Getting Started category of docs 105 | { 106 | "docs": { 107 | "Getting Started": [ 108 | "quick-start", 109 | "newly-created-doc" // new doc here 110 | ], 111 | ... 112 | }, 113 | ... 114 | } 115 | ``` 116 | 117 | For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation) 118 | 119 | ## Adding a new blog post 120 | 121 | 1. Make sure there is a header link to your blog in `website/siteConfig.js`: 122 | 123 | `website/siteConfig.js` 124 | ```javascript 125 | headerLinks: [ 126 | ... 127 | { blog: true, label: 'Blog' }, 128 | ... 129 | ] 130 | ``` 131 | 132 | 2. Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`: 133 | 134 | `website/blog/2018-05-21-New-Blog-Post.md` 135 | 136 | ```markdown 137 | --- 138 | author: Frank Li 139 | authorURL: https://twitter.com/foobarbaz 140 | authorFBID: 503283835 141 | title: New Blog Post 142 | --- 143 | 144 | Lorem Ipsum... 145 | ``` 146 | 147 | For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog) 148 | 149 | ## Adding items to your site's top navigation bar 150 | 151 | 1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`: 152 | 153 | `website/siteConfig.js` 154 | ```javascript 155 | { 156 | headerLinks: [ 157 | ... 158 | /* you can add docs */ 159 | { doc: 'my-examples', label: 'Examples' }, 160 | /* you can add custom pages */ 161 | { page: 'help', label: 'Help' }, 162 | /* you can add external links */ 163 | { href: 'https://github.com/facebook/Docusaurus', label: 'GitHub' }, 164 | ... 165 | ], 166 | ... 167 | } 168 | ``` 169 | 170 | For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation) 171 | 172 | ## Adding custom pages 173 | 174 | 1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`: 175 | 1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element: 176 | 177 | `website/siteConfig.js` 178 | ```javascript 179 | { 180 | headerLinks: [ 181 | ... 182 | { page: 'my-new-custom-page', label: 'My New Custom Page' }, 183 | ... 184 | ], 185 | ... 186 | } 187 | ``` 188 | 189 | For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages). 190 | 191 | # Full Documentation 192 | 193 | Full documentation can be found on the [website](https://docusaurus.io/). 194 | -------------------------------------------------------------------------------- /docusaurus/website/core/Footer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2017-present, Facebook, Inc. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | const React = require('react'); 9 | 10 | class Footer extends React.Component { 11 | docUrl(doc, language) { 12 | const baseUrl = this.props.config.baseUrl; 13 | const docsUrl = this.props.config.docsUrl; 14 | const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`; 15 | const langPart = `${language ? `${language}/` : ''}`; 16 | return `${baseUrl}${docsPart}${langPart}${doc}`; 17 | } 18 | 19 | pageUrl(doc, language) { 20 | const baseUrl = this.props.config.baseUrl; 21 | return baseUrl + (language ? `${language}/` : '') + doc; 22 | } 23 | 24 | render() { 25 | return ( 26 | 81 | ); 82 | } 83 | } 84 | 85 | module.exports = Footer; 86 | -------------------------------------------------------------------------------- /docusaurus/website/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "examples": "docusaurus-examples", 4 | "start": "docusaurus-start", 5 | "build": "docusaurus-build", 6 | "publish-gh-pages": "docusaurus-publish", 7 | "write-translations": "docusaurus-write-translations", 8 | "version": "docusaurus-version", 9 | "rename-version": "docusaurus-rename-version" 10 | }, 11 | "devDependencies": { 12 | "docusaurus": "^1.7.2" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /docusaurus/website/pages/en/help.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2017-present, Facebook, Inc. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | const React = require('react'); 9 | 10 | const CompLibrary = require('../../core/CompLibrary.js'); 11 | 12 | const Container = CompLibrary.Container; 13 | const GridBlock = CompLibrary.GridBlock; 14 | 15 | function Help(props) { 16 | const {config: siteConfig, language = ''} = props; 17 | const {baseUrl, docsUrl} = siteConfig; 18 | const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`; 19 | const langPart = `${language ? `${language}/` : ''}`; 20 | const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`; 21 | 22 | const supportLinks = [ 23 | { 24 | content: `Learn more using the [documentation on this site.](${docUrl( 25 | 'doc1.html', 26 | )})`, 27 | title: 'Browse Docs', 28 | }, 29 | { 30 | content: 'Ask questions about the documentation and project', 31 | title: 'Join the community', 32 | }, 33 | { 34 | content: "Find out what's new with this project", 35 | title: 'Stay up to date', 36 | }, 37 | ]; 38 | 39 | return ( 40 |
41 | 42 |
43 |
44 |

Need help?

45 |
46 |

This project is maintained by a dedicated group of people.

47 | 48 |
49 | 50 |
51 | ); 52 | } 53 | 54 | module.exports = Help; 55 | -------------------------------------------------------------------------------- /docusaurus/website/pages/en/users.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2017-present, Facebook, Inc. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | const React = require('react'); 9 | 10 | const CompLibrary = require('../../core/CompLibrary.js'); 11 | 12 | const Container = CompLibrary.Container; 13 | 14 | class Users extends React.Component { 15 | render() { 16 | const {config: siteConfig} = this.props; 17 | if ((siteConfig.users || []).length === 0) { 18 | return null; 19 | } 20 | 21 | const editUrl = `${siteConfig.repoUrl}/edit/master/website/siteConfig.js`; 22 | const showcase = siteConfig.users.map(user => ( 23 | 24 | {user.caption} 25 | 26 | )); 27 | 28 | return ( 29 |
30 | 31 |
32 |
33 |

Who is Using This?

34 |

This project is used by many folks

35 |
36 |
{showcase}
37 |

Are you using this project?

38 | 39 | Add your company 40 | 41 |
42 | 43 |
44 | ); 45 | } 46 | } 47 | 48 | module.exports = Users; 49 | -------------------------------------------------------------------------------- /docusaurus/website/sidebars.json: -------------------------------------------------------------------------------- 1 | { 2 | "docs": { 3 | "Getting Started": [ 4 | "getting-started", 5 | "Folder Structure", 6 | "available-scripts", 7 | "supported-browsers-features", 8 | "custom-templates" 9 | ], 10 | "Development": [ 11 | "managing-depencencies", 12 | "adding-pages", 13 | "adding-stylesheets", 14 | "post-processing-css", 15 | "adding-images", 16 | "http-proxy" 17 | ], 18 | "Deployment": ["public-path"], 19 | "Plugins": [ 20 | "what-is-the-plugin", 21 | "rocketact-plugin-polyfill", 22 | "rocketact-plugin-bundle-analyzer", 23 | "plugin-template", 24 | "awesome-plugins" 25 | ] 26 | }, 27 | "docs-other": { 28 | "First Category": ["doc4", "doc5"] 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /docusaurus/website/siteConfig.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2017-present, Facebook, Inc. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | // See https://docusaurus.io/docs/site-config for all the possible 9 | // site configuration options. 10 | 11 | // List of projects/orgs using your project for the users page. 12 | const users = [ 13 | { 14 | caption: "JD", 15 | // You will need to prepend the image path with your baseUrl 16 | // if it is not '/', like: '/test-site/img/docusaurus.svg'. 17 | image: "https://img11.360buyimg.com/uba/jfs/t1/19505/13/12239/63117/5c96050bE8cf2a48b/8332354ad8e007cd.png", 18 | infoLink: "https://www.jd.com", 19 | pinned: true 20 | } 21 | ]; 22 | 23 | const repoUrl = "https://github.com/jdf2e/rocketact"; 24 | const baseUrl = "/"; 25 | 26 | const siteConfig = { 27 | title: "Rocketact", // Title for your website. 28 | tagline: "🚀 Developing React projects with ease", 29 | url: "https://rocketact.js.org", // Your website URL 30 | baseUrl, // Base URL for your project */ 31 | // For github.io type URLs, you would set the url and baseUrl like: 32 | // url: 'https://facebook.github.io', 33 | // baseUrl: '/test-site/', 34 | 35 | // Used for publishing and more 36 | projectName: "rocketact", 37 | organizationName: "jdf2e", 38 | // For top-level user or org sites, the organization is still the same. 39 | // e.g., for the https://JoelMarcey.github.io site, it would be set like... 40 | // organizationName: 'JoelMarcey' 41 | editUrl:`${repoUrl}/edit/master/docusaurus/docs/`, 42 | 43 | // For no header links in the top nav bar -> headerLinks: [], 44 | headerLinks: [ 45 | { doc: "getting-started", label: "Docs" }, 46 | { href: repoUrl, label: "GitHub" } 47 | ], 48 | 49 | // If you have users set above, you add it here: 50 | users, 51 | 52 | /* path to images for header/footer */ 53 | headerIcon: "img/rocketact.png", 54 | footerIcon: "img/rocketact.png", 55 | favicon: "img/favicon.png", 56 | 57 | /* Colors for website */ 58 | colors: { 59 | primaryColor: "#282c34", 60 | secondaryColor: "#424242" 61 | }, 62 | algolia: { 63 | apiKey: '54dc1e803306b3c7b9c9da789d0b7cf6', 64 | indexName: 'rocketact', 65 | algoliaOptions: {} // Optional, if provided by Algolia 66 | }, 67 | /* Custom fonts for website */ 68 | /* 69 | fonts: { 70 | myFont: [ 71 | "Times New Roman", 72 | "Serif" 73 | ], 74 | myOtherFont: [ 75 | "-apple-system", 76 | "system-ui" 77 | ] 78 | }, 79 | */ 80 | 81 | // This copyright info is used in /core/Footer.js and blog RSS/Atom feeds. 82 | copyright: `Copyright © 2018-present Rocketact documentation authors.`, 83 | 84 | highlight: { 85 | // Highlight.js theme to use for syntax highlighting in code blocks. 86 | theme: "monokai" 87 | }, 88 | usePrism: ['jsx'], 89 | 90 | // Add custom scripts here that would be placed in