This repository is a monorepo containing several npm packages used by the website of online news media The Reporter.
We use Yarn Workspaces to:
- Add and remove dependencies of all packages (subfolders) easily.
- Prevent installing duplicate dependencies across packages (subfolders). Yarn can hoist them to the root folder.
- Create symlinks between packages (subfolders) that depend on each other.
Some example commands for common scienarios:
Want to add
lodashto the dependencies of all packages:
yarn workspaces run add lodash
Want to add
reactto the peer dependencies of only
yarn workspace @twreporter/react-components add react --peer
package.jsonof given package, not the path string in the
workspacesarray of root
packages.jsonor the dirname.
Want to add
a-root-only-toolto the dev dependencies of
twreporter-npm-packagesand not in any package:
yarn add a-root-only-tool --dev -W
Eslint and Prettier
You can also run
make lint --ignore-errors # Add `--ignore-errors` flag to make tasks continue even though there is any package has linting errors
Set Dev Tools
Install babel at root:
yarn add \ @babel/cli @babel/core \ @babel/preset-env @babel/preset-react \ @babel/plugin-proposal-class-properties babel-plugin-inline-react-svg babel-plugin-styled-components \ --dev --exact -W
Install eslint and prettier at root:
yarn add \ prettier \ babel-eslint eslint \ eslint-config-prettier eslint-config-standard \ eslint-plugin-babel eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-react eslint-plugin-standard \ --dev --exact -W
Install tools for linting staged files at git commit hooks at root:
yarn add \ husky@^1.3.1 lint-staged@^8.1.5 \ --dev -W
Install other dev tools at root:
yarn add rimraf --dev -W
Install webpack-dev-server if needed:
yarn workspace <workspace_name> add \ webpack@^4.29.6 webpack-cli@^3.3.0 webpack-dev-server@^3.3.0 \ babel-loader@^8.0.5 url-loader@^1.1.2 \ html-webpack-plugin@^3.2.0 \ --dev
--watch flag to re-compile the source code every time that we change it.
Develop Single Package
# at root and want to dev `packages/core` only make dev PKG=core # same as at `packages/core` and run make dev
Develop all Packages
# at root make dev
yarn install the packages and run
make dev at each subfolder.
Build and Publish
We do not use tools like Lerna to manage package version and publish process currently. So if some of the packages are updated at the same time, we need to update the dependencies among them and publish them manually.
The reason of not using the tool is that the packages in this repo are few and the relation among them is still simple. If the amount of packages arises or the inter-dependency becomes complicated, we can apply the tool at any time.
# at any <subfolder> make build # after build npm publish
# at root folder, it will run `make build` at each subfolder make build