1 | Add notes on
|
2 |
|
3 | 1) Assets
|
4 | 2) Babel (and the inability to add a babelrc)
|
5 | 3) CSS modules (.module.css)
|
6 |
|
7 | ## Upgrading to @quintype/build 2
|
8 |
|
9 | In order to upgrade to build 2 (which comes with Webpack 4), run the following command:
|
10 |
|
11 | ```sh
|
12 | npm install -D @quintype/build@2 webpack@4 webpack-cli webpack-dev-server@3 babel-plugin-dynamic-import-node babel-loader css-loader file-loader sass-loader
|
13 | ```
|
14 |
|
15 | ## Babel configs
|
16 |
|
17 | We have to manage babel configs for three environments - server, client and test. For most part the test configuration should be the same as the server configuration.
|
18 |
|
19 | On server side code, we need babel to
|
20 | - transpile the code as per the running NodeJS version
|
21 | - transform ES modules to CJS modules
|
22 | - transform any dynamic imports
|
23 | - replace import of assets with a static string
|
24 | - let css module classes be generated and added to markup
|
25 |
|
26 | On client side code, we need babel to
|
27 | - transpile code as per some browserlist config
|
28 | - keep ES modules as is, let webpack handle it
|
29 | - keep dynamic imports as is, let webpack handle it
|
30 |
|
31 | To enable better development workflow, we want the server code to be transpile on the fly. This is demonstrated in `index.js`
|
32 |
|
33 | In production mode, we don't want on the fly transpilation. Instead we want to overwrite the src files with the transpiled ones during the Docker image build stage.
|
34 |
|
35 | ### Places where babel config is defined
|
36 |
|
37 | - index.js (server dev time)
|
38 | - default-babel-rc (server prod time)
|
39 | - bin/quintype-build (server prod time)
|
40 | - webpack.config.js (client)
|
41 |
|
42 | ### Requirements of new babel/webpack configs
|
43 |
|
44 | - should allow running only babel on the server code
|
45 | - should support BABEL_TARGET and NODE_ENV to allow generating config for browser/server and dev/prod combinations
|
46 | - should be able override babel config via app specific JS
|
47 | - should be able override webpack config via app specific JS
|
48 | - should be able to pass it to jest/mocha with necessary options set
|
49 | - should be able to get entire babel/webpack config as a JS object to easily merge it with storybook config
|
50 |
|
51 | For Jest (tests),
|
52 | - Use a custom transformer file to give the path of babel config
|
53 |
|
54 | For Babel Register (server side, dev mode),
|
55 | - It directly accepts the path to the config file
|
56 |
|
57 | For Babel CLI (server side, prod mode),
|
58 | - It directly accepts the path to the config file
|
59 |
|
60 | For Webpack (browser, prod & dev mode)
|
61 | - Babel Loader can be given the path to the babel config file.
|
62 | - Babel Loader can also accept the entire babel config as an object
|
63 |
|
64 | Steps,
|
65 | - The babel config file is loaded
|
66 | - It will read environment variables BABEL_TARGET and NODE_ENV to determine if config is for server/browser and prod/dev.
|
67 | - It will read the `quintype-build.config.js` file if present in the application root, ie the working directory.
|
68 | - The file will export build options object. It can have functions like `modifyBabel`, `modifyWebpack` to allow the developer to customize the babel/webpack config.
|
69 | - The default config is prepared based on environment variables and then passed to `modifyBabel` for augmentation. The returned config is exported.
|
70 |
|
71 | ### Migration to build@3
|
72 |
|
73 | - Run the following to execute the script:
|
74 | ```sh
|
75 | sh <(curl https://raw.githubusercontent.com/quintype/quintype-node-build/master/scripts/build-2-to-3-migration)
|
76 | ```
|
77 | - Verify Changes with `git diff --cached`.
|
78 |
|
79 | Note:
|
80 | 1. We need `./app/client/font.js` available in the project with `fontfaceobserver` as a dev dependency
|
81 | 2. If you have to compile any native addon (with `node-gyp`) make sure to install python,make and g++ in Docker file in build stage.
|
82 |
|