Update scripts and docs to use yarn where appropriate

Most `npm` operations are replaced with `yarn`, which generally has better
behavior. However, steps like publish that write to the NPM registry are left to
`npm`, which currently handles these tasks best.
This commit is contained in:
J. Ryan Stinnett 2019-03-12 11:06:57 +00:00
parent 13aca0716a
commit 1312ba537a
12 changed files with 89 additions and 107 deletions

View file

@ -22,7 +22,7 @@ addons:
install:
# clone the deps with depth 1: we know we will only ever need that one
# commit.
- npm install && scripts/fetch-develop.deps.sh --depth 1
- scripts/fetch-develop.deps.sh --depth 1 && yarn install
script:
- CHROME_BIN='/usr/bin/google-chrome-stable' npm run test
- npm run lint
- CHROME_BIN='/usr/bin/google-chrome-stable' yarn test
- yarn lint

View file

@ -61,51 +61,45 @@ progress on replacing this with something better.
Building From Source
====================
Riot is a modular webapp built with modern ES6 and requires a npm build system
to build.
Riot is a modular webapp built with modern ES6 and uses a Node.js build system.
Ensure you have the latest LTS version of Node.js installed (v10.x as of this
writing).
1. Install or update `node.js` so that your `node` is at least v8.12.0 (and `npm`
is at least v5.x).
Using `yarn` instead of `npm` is recommended. Please see the Yarn [install
guide](https://yarnpkg.com/docs/install/) if you do not have it already.
1. Install or update `node.js` so that your `node` is at least v10.x.
1. Install `yarn` if not present already.
1. Clone the repo: `git clone https://github.com/vector-im/riot-web.git`.
1. Switch to the riot-web directory: `cd riot-web`.
1. Install the prerequisites: `npm install`.
1. Install the prerequisites: `yarn install`.
1. If you're using the `develop` branch then it is recommended to set up a proper
development environment ("Setting up a dev environment" below) however one can
install the develop versions of the dependencies instead:
```bash
scripts/fetch-develop.deps.sh
```
Note that running `npm install` will undo the symlinks put in place by
`scripts/fetch-develop.deps.sh` so you should run `npm install` first, or
run `npm link matrix-js-sdk` and `npm link matrix-react-sdk` after running
`npm install`.
Whenever you git pull on riot-web you will also probably need to force an update
Whenever you git pull on `riot-web` you will also probably need to force an update
to these dependencies - the simplest way is to re-run the script, but you can also
manually update and rebuild them:
```bash
cd matrix-js-sdk
git pull
npm install # re-run to pull in any new dependencies
# Depending on your version of npm, npm run build may happen as part of
# the npm install above (https://docs.npmjs.com/misc/scripts#prepublish-and-prepare)
# If in doubt, run it anyway:
npm run build
yarn install # re-run to pull in any new dependencies
cd ../matrix-react-sdk
git pull
npm install
npm run build
yarn install
```
Or just use https://riot.im/develop - the continuous integration release of the
develop branch. (Note that we don't reference the develop versions in git directly
due to https://github.com/npm/npm/issues/3055.)
1. Configure the app by copying `config.sample.json` to `config.json` and
modifying it (see below for details).
1. `npm run dist` to build a tarball to deploy. Untaring this file will give
1. `yarn dist` to build a tarball to deploy. Untaring this file will give
a version-specific directory containing all the files that need to go on your
web server.
Note that `npm run dist` is not supported on Windows, so Windows users can run `npm run build`,
Note that `yarn dist` is not supported on Windows, so Windows users can run `yarn build`,
which will build all the necessary files into the `webapp` directory. The version of Riot
will not appear in Settings without using the dist script. You can then mount the
`webapp` directory on your webserver to actually serve up the app, which is entirely static content.
@ -188,7 +182,7 @@ appear in some websites like Facebook, and indeed Riot itself. This has to be
static in the HTML and an absolute URL (and HTTP rather than HTTPS), so it's
not possible for this to be an option in config.json. If you'd like to change
it, you can build Riot as above, but run
`RIOT_OG_IMAGE_URL="http://example.com/logo.png" npm run build`.
`RIOT_OG_IMAGE_URL="http://example.com/logo.png" yarn build`.
Alternatively, you can edit the `og:image` meta tag in `index.html` directly
each time you download a new version of Riot.
@ -202,12 +196,11 @@ build it yourself. Requires Electron >=1.6.0
To run as a desktop app:
1. Follow the instructions in 'Building From Source' above, but run
`npm run build` instead of `npm run dist` (since we don't need the tarball).
`yarn build` instead of `yarn dist` (since we don't need the tarball).
2. Install electron and run it:
```bash
npm install electron
npm run electron
yarn electron
```
To build packages, use electron-builder. This is configured to output:
@ -225,8 +218,8 @@ The only platform that can build packages for all three platforms is macOS:
brew install wine --without-x11
brew install mono
brew install gnu-tar
npm install
npm run build:electron
yarn install
yarn build:electron
```
For other packages, use electron-builder manually. For example, to build a package
@ -244,7 +237,7 @@ Other options for running as a desktop app:
* @asdf:matrix.org points out that you can use nativefier and it just works(tm)
```bash
sudo npm install nativefier -g
yarn global add nativefier
nativefier https://riot.im/app/
```
@ -264,7 +257,7 @@ top of the underlying `matrix-react-sdk`. `matrix-react-sdk` provides both the
higher and lower level React components useful for building Matrix communication
apps using React.
After creating a new component you must run `npm run reskindex` to regenerate
After creating a new component you must run `yarn reskindex` to regenerate
the `component-index.js` for the app (used in future for skinning).
Please note that Riot is intended to run correctly without access to the public
@ -286,9 +279,8 @@ First clone and build `matrix-js-sdk`:
git clone https://github.com/matrix-org/matrix-js-sdk.git
pushd matrix-js-sdk
git checkout develop
npm install
npm install source-map-loader # because webpack is made of fail
# see https://github.com/webpack/webpack/issues/1472
yarn link
yarn install
popd
```
@ -298,7 +290,9 @@ Then similarly with `matrix-react-sdk`:
git clone https://github.com/matrix-org/matrix-react-sdk.git
pushd matrix-react-sdk
git checkout develop
npm link ../matrix-js-sdk
yarn link
yarn link matrix-js-sdk
yarn install
popd
```
@ -308,10 +302,10 @@ Finally, build and start Riot itself:
git clone https://github.com/vector-im/riot-web.git
cd riot-web
git checkout develop
npm install
npm link ../matrix-js-sdk
npm link ../matrix-react-sdk
npm start
yarn link matrix-js-sdk
yarn link matrix-react-sdk
yarn install
yarn start
```
Wait a few seconds for the initial build to finish; you should see something like:
@ -338,7 +332,7 @@ When you make changes to `matrix-react-sdk` or `matrix-js-sdk` they should be
automatically picked up by webpack and built.
If you add or remove any components from the Riot skin, you will need to rebuild
the skin's index by running, `npm run reskindex`.
the skin's index by running, `yarn reskindex`.
If any of these steps error with, `file table overflow`, you are probably on a mac
which has a very low limit on max open files. Run `ulimit -Sn 1024` and try again.
@ -354,12 +348,12 @@ are designed to run in a browser instance under the control of
* Make sure you have Chrome installed (a recent version, like 59)
* Make sure you have `matrix-js-sdk` and `matrix-react-sdk` installed and
built, as above
* `npm run test`
* `yarn test`
The above will run the tests under Chrome in a `headless` mode.
You can also tell karma to run the tests in a loop (every time the source
changes), in an instance of Chrome on your desktop, with `npm run
changes), in an instance of Chrome on your desktop, with `yarn
test-multi`. This also gives you the option of running the tests in 'debug'
mode, which is useful for stepping through the tests in the developer tools.

View file

@ -32,14 +32,14 @@ function getColorName(hex) {
1. Check if the import ``import { _t } from 'matrix-react-sdk/lib/languageHandler';`` is present. If not add it to the other import statements. Also import `_td` if needed.
1. Add ``_t()`` to your string. (Don't forget curly braces when you assign an expression to JSX attributes in the render method). If the string is introduced at a point before the translation system has not yet been initialized, use `_td()` instead, and call `_t()` at the appropriate time.
1. Run `npm run i18n` to update ``src/i18n/strings/en_EN.json``
1. Run `yarn i18n` to update ``src/i18n/strings/en_EN.json``
1. If you added a string with a plural, you can add other English plural variants to ``src/i18n/strings/en_EN.json`` (remeber to edit the one in the same project as the source file containing your new translation).
## Editing existing strings
1. Edit every occurrence of the string inside `_t()` and `_td()` in the JSX files.
1. Run `npm run i18n` to update `src/i18n/strings/en_EN.json`. (Be sure to run this in the same project as the JSX files you just edited.)
1. Run `npm run prunei18n` to remove the old string from `src/i18n/strings/*.json`.
1. Run `yarn i18n` to update `src/i18n/strings/en_EN.json`. (Be sure to run this in the same project as the JSX files you just edited.)
1. Run `yarn prunei18n` to remove the old string from `src/i18n/strings/*.json`.
## Adding variables inside a string.

View file

@ -9,7 +9,7 @@ var webpack_config = require('./webpack.config');
* to build everything; however it's the easiest way to load our dependencies
* from node_modules.
*
* If you run karma in multi-run mode (with `npm run test-multi`), it will watch
* If you run karma in multi-run mode (with `yarn test-multi`), it will watch
* the tests for changes, and webpack will rebuild using a cache. This is much quicker
* than a clean rebuild.
*/

View file

@ -32,30 +32,30 @@
"prunei18n": "matrix-prune-i18n",
"build:res": "node scripts/copy-res.js",
"build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
"build:compile": "npm run reskindex && babel --source-maps -d lib src",
"build:compile": "yarn reskindex && babel --source-maps -d lib src",
"build:bundle": "cross-env NODE_ENV=production webpack -p --progress --bail --mode production",
"build:bundle:dev": "webpack --progress --bail --mode development",
"build:electron": "npm run clean && npm run build && npm run install:electron && build -wml --ia32 --x64",
"build:react-sdk": "node scripts/npm-sub.js matrix-react-sdk run build",
"build:js-sdk": "node scripts/npm-sub.js matrix-js-sdk run start:init",
"build": "npm run build:js-sdk && npm run build:react-sdk && npm run reskindex && npm run build:res && npm run build:bundle",
"build:dev": "npm run build:js-sdk && npm run build:react-sdk && npm run reskindex && npm run build:res && npm run build:bundle:dev",
"build:electron": "yarn clean && yarn build && yarn install:electron && build -wml --ia32 --x64",
"build:react-sdk": "node scripts/yarn-sub.js matrix-react-sdk build",
"build:js-sdk": "node scripts/yarn-sub.js matrix-js-sdk start:init",
"build": "yarn build:js-sdk && yarn build:react-sdk && yarn reskindex && yarn build:res && yarn build:bundle",
"build:dev": "yarn build:js-sdk && yarn build:react-sdk && yarn reskindex && yarn build:res && yarn build:bundle:dev",
"dist": "scripts/package.sh",
"install:electron": "install-app-deps",
"electron": "npm run install:electron && electron .",
"electron": "yarn install:electron && electron .",
"start:res": "node scripts/copy-res.js -w",
"start:js": "webpack-dev-server --host=0.0.0.0 --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js -w --progress --mode development",
"start:js:prod": "cross-env NODE_ENV=production webpack-dev-server -w --progress",
"start:js-sdk": "node scripts/npm-sub.js matrix-js-sdk run start:watch",
"start:js-sdk:prod": "cross-env NODE_ENV=production node scripts/npm-sub.js matrix-js-sdk run start:watch",
"start:react-sdk": "node scripts/npm-sub.js matrix-react-sdk run start:all",
"start:react-sdk:prod": "cross-env NODE_ENV=production node scripts/npm-sub.js matrix-react-sdk run start:all",
"start": "npm run build:js-sdk && npm run build:react-sdk && concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n js-sdk,react-sdk,reskindex,res,riot-js \"npm run start:js-sdk\" \"npm run start:react-sdk\" \"npm run reskindex:watch\" \"npm run start:res\" \"npm run start:js\"",
"start:prod": "npm run build:js-sdk && npm run build:react-sdk && concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n js-sdk,react-sdk,reskindex,res,riot-js \"npm run start:js-sdk:prod\" \"npm run start:react-sdk:prod\" \"npm run reskindex:watch\" \"npm run start:res\" \"npm run start:js:prod\"",
"start:js-sdk": "node scripts/yarn-sub.js matrix-js-sdk start:watch",
"start:js-sdk:prod": "cross-env NODE_ENV=production node scripts/yarn-sub.js matrix-js-sdk start:watch",
"start:react-sdk": "node scripts/yarn-sub.js matrix-react-sdk start:all",
"start:react-sdk:prod": "cross-env NODE_ENV=production node scripts/yarn-sub.js matrix-react-sdk start:all",
"start": "yarn build:js-sdk && yarn build:react-sdk && concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n js-sdk,react-sdk,reskindex,res,riot-js \"yarn start:js-sdk\" \"yarn start:react-sdk\" \"yarn reskindex:watch\" \"yarn start:res\" \"yarn start:js\"",
"start:prod": "yarn build:js-sdk && yarn build:react-sdk && concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n js-sdk,react-sdk,reskindex,res,riot-js \"yarn start:js-sdk:prod\" \"yarn start:react-sdk:prod\" \"yarn reskindex:watch\" \"yarn start:res\" \"yarn start:js:prod\"",
"lint": "eslint src/",
"lintall": "eslint src/ test/",
"clean": "rimraf lib webapp electron_app/dist",
"prepublish": "npm run clean && npm run build:compile",
"prepare": "yarn clean && yarn build:compile",
"test": "karma start --single-run=true --autoWatch=false --browsers ChromeHeadless",
"test-multi": "karma start"
},

View file

@ -1,6 +1,6 @@
#!/bin/bash
#
# Script to perform a release of vector-web.
# Script to perform a release of riot-web.
#
# Requires github-changelog-generator; to install, do
# pip install git+https://github.com/matrix-org/github-changelog-generator.git
@ -21,7 +21,7 @@ cd `dirname $0`
for i in matrix-js-sdk matrix-react-sdk
do
depver=`cat package.json | jq -r .dependencies[\"$i\"]`
latestver=`npm show $i version`
latestver=`yarn info -s $i version`
if [ "$depver" != "$latestver" ]
then
echo "The latest version of $i is $latestver but package.json depends on $depver"
@ -38,13 +38,12 @@ done
# bump Electron's package.json first
release="${1#v}"
tag="v${release}"
echo "electron npm version"
echo "electron yarn version"
cd electron_app
npm version --no-git-tag-version "$release"
yarn version --no-git-tag-version "$release"
git commit package.json -m "$tag"
cd ..
exec ./node_modules/matrix-js-sdk/release.sh -u vector-im -z "$orig_args"

View file

@ -85,8 +85,8 @@ if [ -n "$conffile" ]; then
pushd "$builddir"
fi
npm install
npm run build:electron
yarn install
yarn build:electron
popd

View file

@ -54,9 +54,6 @@ function dodep() {
fi
echo "$repo set to branch "`git -C "$repo" rev-parse --abbrev-ref HEAD`
mkdir -p node_modules
npm link "./$repo" # This does an npm install for us
}
##############################
@ -66,6 +63,13 @@ echo 'Setting up matrix-js-sdk'
dodep matrix-org matrix-js-sdk
pushd matrix-js-sdk
yarn link
yarn install
popd
yarn link matrix-js-sdk
echo -en 'travis_fold:end:matrix-js-sdk\r'
##############################
@ -75,23 +79,21 @@ echo 'Setting up matrix-react-sdk'
dodep matrix-org matrix-react-sdk
# replace the version of js-sdk that got pulled into react-sdk with a link
# to our version. Make sure to do this *after* doing 'npm i' in react-sdk,
# otherwise npm helpfully moves another-json from matrix-js-sdk/node_modules
# into matrix-react-sdk/node_modules.
#
# (note this matches the instructions in the README.)
cd matrix-react-sdk
npm link ../matrix-js-sdk
cd ../
pushd matrix-react-sdk
yarn link
yarn link matrix-js-sdk
yarn install
popd
yarn link matrix-react-sdk
echo -en 'travis_fold:end:matrix-react-sdk\r'
##############################
# Link the reskindex binary in place: if we used npm link,
# npm would do this for us, but we don't because we'd have
# to define the npm prefix somewhere so it could put the
# Link the reskindex binary in place: if we used `yarn link`,
# Yarn would do this for us, but we don't because we'd have
# to define the Yarn binary prefix somewhere so it could put the
# intermediate symlinks there. Instead, we do it ourselves.
mkdir -p node_modules/.bin
ln -sfv ../matrix-react-sdk/scripts/reskindex.js node_modules/.bin/reskindex

View file

@ -8,31 +8,17 @@ nvm use 10
set -x
npm install
# check out corresponding branches of dependencies.
#
# clone the deps with depth 1: we know we will only ever need that one
# commit.
# We need to do this after npm install otherwise modern node versions
# just reset it back.
# clone the deps with depth 1: we know we will only ever need that one commit.
`dirname $0`/fetch-develop.deps.sh --depth 1
# install olm. A naive 'npm i ./olm/olm-*.tgz' fails because it uses the url
# from our package.json (or even matrix-js-sdk's) in preference.
#
# disabled for now, to avoid the annoying scenario of a release doing something
# different to /develop. Instead, add it to the 'npm install' list above.
# -- rav 2016/02/03
#tar -C olm -xz < olm/olm-*.tgz
#rm -r node_modules/olm
#cp -r olm/package node_modules/olm
yarn install
# run the mocha tests
npm run test
yarn test
# run eslint
npm run lintall -- -f checkstyle -o eslint.xml || true
yarn lintall -- -f checkstyle -o eslint.xml || true
rm dist/riot-*.tar.gz || true # rm previous artifacts without failing if it doesn't exist

View file

@ -13,11 +13,11 @@ else
version=`git describe --dirty --tags || echo unknown`
fi
npm run clean
npm run build$dev
yarn clean
yarn build$dev
# include the sample config in the tarball. Arguably this should be done by
# `npm run build`, but it's just too painful.
# `yarn build`, but it's just too painful.
cp config.sample.json webapp/
mkdir -p dist

View file

@ -9,13 +9,13 @@ if (!moduleName) {
const argString = process.argv.length > 3 ? process.argv.slice(3).join(" ") : "";
if (!argString) {
console.error("Expected an npm argument string to use");
console.error("Expected an yarn argument string to use");
process.exit(1);
}
const modulePath = path.dirname(require.resolve(`${moduleName}/package.json`));
child_process.execSync("npm " + argString, {
child_process.execSync("yarn " + argString, {
env: process.env,
cwd: modulePath,
stdio: ['inherit', 'inherit', 'inherit'],

View file

@ -143,8 +143,9 @@ module.exports = {
},
resolve: {
alias: {
// alias any requires to the react module to the one in our path, otherwise
// we tend to get the react source included twice when using npm link.
// alias any requires to the react module to the one in our path,
// otherwise we tend to get the react source included twice when
// using `npm link` / `yarn link`.
"react": path.resolve('./node_modules/react'),
"react-dom": path.resolve('./node_modules/react-dom'),
"react-addons-perf": path.resolve('./node_modules/react-addons-perf'),