enable less; jest tested;

Author: Zhou

ReadMe.md

@@ -12,10 +12,25 @@ The initial work of Planimation JS Library, and the frontend is waiting to be de
 - [RequireJS] - RequireJS is a JavaScript file and module loader
 
 ## Run the demo
-In the root folder:
-```sh
-npm install http-server -g
-http-server
+Open the working directory with VS code, in the terminal:
+```
+yarn //or “npm install”
+```
+This command will automatically install all the packages you need in this project.
+
+Run the demo:
+```
+npm run start
+```
+This will open a page on your browser, and you should see a jumping rabbit like this:
+
+ 
+
+Now, the development environment is all set up! Start coding😊
+
+Test your code:
+```
+yarn test  //or “npm test”
 ```
 Open the link in your browser, and you should see a visualisation of block world .
 
@@ -33,6 +48,8 @@ When you develop the new features for Planimation JS Libary, please try to modul
 * Pixi JS - https://www.pixijs.com/
 * Pixi JS Tutorial - https://github.com/kittykatattack/learningPixi
 * Pixi JS Demos - https://pixijs.io/examples/#/demos-basic/container.js
+* ReactPixi - https://reactpixi.org/
+* React - https://reactjs.org/docs/getting-started.html
 
 [PIXIJS]: <https://www.pixijs.com/>
 [RequireJS]:<https://requirejs.org/>

config/webpack.config.js

@@ -59,14 +59,11 @@ const useTypeScript = fs.existsSync(paths.appTsConfig);
 const swSrc = paths.swSrc;
 
 // style files regexes
-const cssRegex = /\.css$/;
-const cssModuleRegex = /\.module\.css$/;
+const cssRegex = /\.(css|less)$/;
+const cssModuleRegex = /\.module\.(css|less)$/;
 const sassRegex = /\.(scss|sass)$/;
 const sassModuleRegex = /\.module\.(scss|sass)$/;
 
-const lessRegex = /\.less$/;
-const lessModuleRegex = /\.module\.less$/;
-
 const hasJsxRuntime = (() => {
   if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
     return false;
@@ -474,11 +471,13 @@ module.exports = function (webpackEnv) {
               test: cssRegex,
               exclude: cssModuleRegex,
               use: getStyleLoaders({
-                importLoaders: 1,
+                importLoaders: 2,
+                modules: true,
                 sourceMap: isEnvProduction
                   ? shouldUseSourceMap
                   : isEnvDevelopment,
-              }),
+              },
+              "less-loader"),
               // Don't consider CSS imports dead code even if the
               // containing package claims to have no side effects.
               // Remove this when webpack adds a warning or an error for this.
@@ -537,30 +536,6 @@ module.exports = function (webpackEnv) {
                 'sass-loader'
               ),
             },
-            {
-              test: lessRegex,
-              exclude: sassModuleRegex,
-              use: getStyleLoaders(
-                {
-                  importLoaders: 2,
-                  sourceMap: isEnvProduction && shouldUseSourceMap,
-                },
-                'less-loader'
-              ),
-              sideEffects: true,
-            },
-            {
-              test: lessModuleRegex,
-              use: getStyleLoaders(
-                {
-                  importLoaders: 2,
-                  sourceMap: isEnvProduction && shouldUseSourceMap,
-                  modules: true,
-                  getLocalIdent: getCSSModuleLocalIdent,
-                },
-                'less-loader'
-              ),
-            },
             // "file" loader makes sure those assets get served by WebpackDevServer.
             // When you `import` an asset, you get its (virtual) filename.
             // In production, they would get copied to the `build` folder.

jsconfig.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+      "experimentalDecorators": true, 
+      "baseUrl": "./",
+      "paths": {
+        "@/*": ["src/*"],
+        "components/*": ["src/components/*"],
+        "pages/*": ["src/pages/*"]
+      }
+    },
+    "exclude": ["node_modules", "dist"]
+}