update readme

monkey-patches · Oct 2, 2018 · 66e6242 · 66e6242
1 parent 6c6ed7b
commit 66e6242
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 56 deletions.
diff --git a/README.md b/README.md
@@ -42,7 +42,7 @@ module.exports = function (webpackConfig, isDevelopment) {
   "scripts": {
     "start": "monkey-react-scripts start",
     "build": "monkey-react-scripts build",
-    "test": "monkey-react-scripts test --env=jsdom"
+    "test": "monkey-react-scripts test"
   }
 ```
 
@@ -52,13 +52,12 @@ I suggest you see [scripts](scripts) and [bin](bin) folders. (less than 100 line
 Note: returned value of `require` function is mutable. so you can mutate that before real build/start script.
 
 ## Snippets
-You can use [snippets](snippets/cra-1.x.x.md) if you want.
+You can use [snippets](snippets/cra-2.x.x.md) if you want.
 
 snippets:
 - `addPlugin`
 - `findRule`
 - `addBabelPlugins`
-- `addRule`
 
 ## Example
 Before use examples, you should know what happens inside react-scripts webpack config.
@@ -106,33 +105,28 @@ build
 ├── index.html
 ├── static
 │   ├── css
-│   │   ├── main.9a0fe4f1.css
-│   │   └── main.9a0fe4f1.css.map
 │   ├── js
-│   │   ├── main.373f9afc.js
-│   │   └── main.373f9afc.js.map
 │   └── media
-│       └── logo.5d5d9eef.svg
 └── stats.html                      <-- new file
 ```
 ### Decorator support
 If you love decorators, you can add decorator support:
 - install decorator plugin
 ```
-npm install --save-dev babel-plugin-transform-decorators-legacy
+npm install --save-dev @babel/plugin-proposal-decorators
 ```
-- edit `webpack.monkey.js` like this (copy `findRule`, `addBabelPlugins` from [snippets](snippets/cra-1.x.x.md)):
+- edit `webpack.monkey.js` like this (copy `findRule`, `addBabelPlugins` from [snippets](snippets/cra-2.x.x.md)):
 ```js
 function findRule(webpackConfig, callback) {
     /* snippet codes */
 }
 
 function addBabelPlugins(webpackConfig, plugins) {
-        /* snippet codes */
+    /* snippet codes */
 }
 
 module.exports = function (webpackConfig, isDevelopment) {
-    addBabelPlugins(webpackConfig, ['transform-decorators-legacy']);
+    addBabelPlugins(webpackConfig, [["@babel/plugin-proposal-decorators", {legacy: true}]]);
 };
 ```
 related issues: [#107][107], [#167][167], [#214][214], [#309][309], [#411][411], [#1357][1357]
@@ -156,52 +150,17 @@ if you are using relay classic you can see [old readme][old-relay-support] and g
 
 related issues: [#462][462], [#662][662], [#900][900]
 
-### scss support
-- install `node-sass` and `sass-loader`:
-
-```
-npm install --save-dev node-sass sass-loader
-```
-
-- edit `webpack.monkey.js` like this:
-```js
-/* copy findRule, addRule from snippets */
-module.exports = function (webpackConfig, isDevelopment) {
-  // find css rule
-  const cssRule = findRule(webpackConfig, (rule) => {
-    return ('' + rule.test === '' + /\.css$/)
-  });
-  const cssLoaders = isDevelopment ? cssRule.use : cssRule.loader;
-
-  const postCssLoader = cssLoaders[cssLoaders.length - 1];
-  postCssLoader.options.sourceMap = true; // add source option to postcss
-
-  // add sass support
-  const sassLoader = {loader: require.resolve('sass-loader'), options: {sourceMap: true}};
-  const sassLoaders = cssLoaders.concat(sassLoader);
-
-  const sassRule = {
-    test: /\.scss$/,
-    [isDevelopment ? 'use' : 'loader']: sassLoaders,
-  };
-
-  addRule(webpackConfig, sassRule)
-};
-```
-similar code for less or stylus.
-
-related issues: [#78][78], [#115][115], [#351][351], [#412][412], [#1509][1509], [#1639][1639]
-
 ## postcss config
 If you want to change postcss config you can use this code. 
 ```js
   // add rtl css support
+  // find postCssLoader
   const postCssFunction = postCssLoader.options.plugins
   postCssLoader.options.plugins = () => {
       return [...postCssFunction(), require('postcss-inline-rtl')]
   }
 ```
-
+you can find more detail in [this file][css-patch]
 ## TODOs
 
 - [ ] customize test runner (jest)
@@ -227,6 +186,7 @@ If you want to change postcss config you can use this code.
 [relay-setup]: https://facebook.github.io/relay/docs/en/installation-and-setup.html
 [monkey-react-scripts-example]: https://github.com/monkey-patches/monkey-react-scripts-example
 [old-relay-support]: https://github.com/monkey-patches/monkey-react-scripts/blob/b7380bbb873d637cdd6cf911de9f696b90b608fe/README.md#relay-support
+[css-patch]: https://github.com/monkey-patches/monkey-react-scripts-example/blob/d759030325ca2d638b1ea0dd44e51655b88d5022/webpack-helpers/cssPatch.js
 
 [107]: https://github.com/facebookincubator/create-react-app/issues/107
 [167]: https://github.com/facebookincubator/create-react-app/issues/167
@@ -238,10 +198,3 @@ If you want to change postcss config you can use this code.
 [462]: https://github.com/facebookincubator/create-react-app/issues/462
 [662]: https://github.com/facebookincubator/create-react-app/pull/662
 [900]: https://github.com/facebookincubator/create-react-app/issues/900
-
-[78]: https://github.com/facebookincubator/create-react-app/issues/78
-[115]: https://github.com/facebookincubator/create-react-app/pull/115
-[351]: https://github.com/facebookincubator/create-react-app/issues/351
-[412]: https://github.com/facebookincubator/create-react-app/pull/412
-[1509]: https://github.com/facebookincubator/create-react-app/pull/1509
-[1639]: https://github.com/facebookincubator/create-react-app/issues/1639
diff --git a/snippets/cra-2.x.x.md b/snippets/cra-2.x.x.md
@@ -0,0 +1,35 @@
+# Code snippets for create-react-app 1.x.x
+useful codes you can copy and use in webpack.monkey.js file.
+
+In real project I copy some of them in other file and use require function:
+
+## webpack plugin
+
+Add webpack plugin
+```js
+function addPlugin(webpackConfig, plugin) {
+    webpackConfig.plugins.push(plugin);
+}
+```
+## Find Rule
+
+```js
+function findRule(webpackConfig, callback) {
+    const rules = webpackConfig.module.rules[3].oneOf;
+    const index = rules.findIndex(callback);
+    if (index === -1) throw Error('Loader not found');
+    return rules[index]
+}
+```
+
+## Add Babel plugin
+requirement: `findRule`
+```js
+function addBabelPlugins(webpackConfig, plugins) {
+    // find babel rule
+    const babelRule = findRule(webpackConfig, (rule) => {
+        return ('' + rule.test === '' + /\.(js|jsx)$/)
+    });
+    babelRule.options.plugins = (babelRule.options.plugins || []).concat(plugins);
+}
+```