From d137ede0f8317d351771aff00ed4c95ca70a3254 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Lins?= Date: Sun, 9 Feb 2020 11:25:19 -0300 Subject: [PATCH 1/5] Creating build app --- .../configs/webpack.config.js | 139 ++++++++++++------ packages/react-dependency-scripts/index.js | 2 +- .../react-dependency-scripts/package.json | 1 + .../scripts/build-app.js | 27 ++++ 4 files changed, 120 insertions(+), 49 deletions(-) create mode 100644 packages/react-dependency-scripts/scripts/build-app.js diff --git a/packages/react-dependency-scripts/configs/webpack.config.js b/packages/react-dependency-scripts/configs/webpack.config.js index f36cfac..f0eec7c 100644 --- a/packages/react-dependency-scripts/configs/webpack.config.js +++ b/packages/react-dependency-scripts/configs/webpack.config.js @@ -1,55 +1,98 @@ -"use strict"; +'use strict'; -const HtmlWebpackPlugin = require("html-webpack-plugin"); -const resolverPath = require("../utils/resolverPath"); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const resolverPath = require('../utils/resolverPath'); -const APP_PATH = resolverPath("src/dev"); +const APP_PATH = resolverPath('src/dev'); +const BUILD_PATH = resolverPath('build'); -const config = { - entry: APP_PATH, - mode: "development", - resolve: { - modules: ["node_modules", "src/lib"], - extensions: [".ts", ".tsx", ".js", ".json"] - }, - module: { - rules: [ - { - test: /\.(ts|js)x?$/, - loader: "babel-loader", - exclude: /node_modules/, - options: { - presets: [require.resolve("babel-preset-react-app")] - } - }, - { - test: /\.(gif|png|jpe?g|svg)$/i, - use: [ - "file-loader", - { - loader: "image-webpack-loader" +const configWebpack = ({ mode }) => { + const isEnvProduction = mode === 'production'; + + return { + entry: APP_PATH, + output: { + path: BUILD_PATH, + pathinfo: !isEnvProduction, + filename: isEnvProduction + ? 'static/js/[name].[contenthash:8].js' + : 'bundle.js', + chunkFilename: isEnvProduction + ? 'static/js/[name].[contenthash:8].chunk.js' + : 'static/js/[name].chunk.js', + globalObject: 'this' + }, + mode, + bail: isEnvProduction, + resolve: { + modules: ['node_modules', 'src'], + extensions: ['.ts', '.tsx', '.js', '.json'] + }, + module: { + rules: [ + { + test: /\.(ts|js)x?$/, + loader: require.resolve('babel-loader'), + exclude: /node_modules/, + options: { + babelrc: false, + configFile: false, + compact: isEnvProduction, + sourceMaps: false, + inputSourceMap: false, + presets: [require.resolve('babel-preset-react-app')] } - ] - }, - { - test: /\.scss$/, - use: ["style-loader", "css-loader", "sass-loader"] - }, - { - test: /\.css$/, - use: ["style-loader", "css-loader"] - } + }, + { + test: /\.(gif|png|jpe?g|svg)$/i, + use: ['file-loader', { loader: 'image-webpack-loader' }] + }, + { + test: /\.scss$/, + use: ['style-loader', 'css-loader', 'sass-loader'] + }, + { + test: /\.css$/, + use: ['style-loader', 'css-loader'] + } + ] + }, + optimization: { minimize: isEnvProduction }, + node: { + module: 'empty', + dgram: 'empty', + dns: 'mock', + fs: 'empty', + http2: 'empty', + net: 'empty', + tls: 'empty', + child_process: 'empty' + }, + plugins: [ + new HtmlWebpackPlugin( + Object.assign( + {}, + { inject: true, template: `${APP_PATH}/index.html` }, + isEnvProduction + ? { + minify: { + removeComments: true, + collapseWhitespace: true, + removeRedundantAttributes: true, + useShortDoctype: true, + removeEmptyAttributes: true, + removeStyleLinkTypeAttributes: true, + keepClosingSlash: true, + minifyJS: true, + minifyCSS: true, + minifyURLs: true + } + } + : undefined + ) + ) ] - }, - - plugins: [ - new HtmlWebpackPlugin({ - inject: true, - template: `${APP_PATH}/index.html` - }) - ], - - optimization: { minimize: false } + }; }; -module.exports = config; +module.exports = configWebpack; diff --git a/packages/react-dependency-scripts/index.js b/packages/react-dependency-scripts/index.js index a7295fc..68c9c92 100755 --- a/packages/react-dependency-scripts/index.js +++ b/packages/react-dependency-scripts/index.js @@ -9,7 +9,7 @@ process.on('unhandledRejection', err => { const { spawnSync } = require('child_process'); const args = process.argv.slice(2); -const scripts = ['start', 'build', 'test']; +const scripts = ['start', 'build', 'test', 'build-app']; if (args.length === 0) { console.log('\x1b[31mEmpty script.'); diff --git a/packages/react-dependency-scripts/package.json b/packages/react-dependency-scripts/package.json index 9c8580e..d63c28c 100644 --- a/packages/react-dependency-scripts/package.json +++ b/packages/react-dependency-scripts/package.json @@ -36,6 +36,7 @@ "choose-port": "^0.1.0", "css-loader": "^3.4.2", "file-loader": "^5.0.2", + "fs-extra": "^8.1.0", "html-webpack-plugin": "^3.2.0", "image-webpack-loader": "^6.0.0", "jest": "^25.1.0", diff --git a/packages/react-dependency-scripts/scripts/build-app.js b/packages/react-dependency-scripts/scripts/build-app.js new file mode 100644 index 0000000..fd51d39 --- /dev/null +++ b/packages/react-dependency-scripts/scripts/build-app.js @@ -0,0 +1,27 @@ +'use strict'; + +process.env.NODE_ENV = 'production'; +process.env.BABEL_ENV = 'production'; + +const Webpack = require('webpack'); +const fs = require('fs-extra'); +const resolverPath = require('../utils/resolverPath'); +const configWebpack = require('../configs/webpack.config.js'); + +const BUILD_PATH = resolverPath('build'); + +const config = configWebpack({ + mode: 'production' +}); + +fs.emptyDirSync(BUILD_PATH); + +const compiler = Webpack(config); + +compiler.run((err, stats) => { + if (err) { + return console.log(err); + } + + return console.log(stats); +}); From aba96fa842a6b4a787de6d5e3b8f031f3c5e458b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Lins?= Date: Sun, 9 Feb 2020 17:17:41 -0300 Subject: [PATCH 2/5] Adjustment in resolve webpack config --- packages/react-dependency-scripts/configs/webpack.config.js | 6 +++++- packages/react-dependency-scripts/scripts/start.js | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/react-dependency-scripts/configs/webpack.config.js b/packages/react-dependency-scripts/configs/webpack.config.js index f0eec7c..eab01a9 100644 --- a/packages/react-dependency-scripts/configs/webpack.config.js +++ b/packages/react-dependency-scripts/configs/webpack.config.js @@ -25,7 +25,11 @@ const configWebpack = ({ mode }) => { mode, bail: isEnvProduction, resolve: { - modules: ['node_modules', 'src'], + modules: [ + 'node_modules', + resolverPath('node_modules'), + resolverPath('src') + ], extensions: ['.ts', '.tsx', '.js', '.json'] }, module: { diff --git a/packages/react-dependency-scripts/scripts/start.js b/packages/react-dependency-scripts/scripts/start.js index eaa7a72..6c53867 100644 --- a/packages/react-dependency-scripts/scripts/start.js +++ b/packages/react-dependency-scripts/scripts/start.js @@ -10,12 +10,16 @@ process.on('unhandledRejection', err => { const Webpack = require('webpack'); const WebpackDevServer = require('webpack-dev-server'); const open = require('open'); -const config = require('../configs/webpack.config.js'); +const configWebpack = require('../configs/webpack.config.js'); const resolverPath = require('../utils/resolverPath'); const choosePort = require('choose-port'); const APP_PATH = resolverPath('src/dev'); +const config = configWebpack({ + mode: 'development' +}); + const compiler = Webpack(config); const server = new WebpackDevServer(compiler, { contentBase: APP_PATH, From 2f251e1034cbc412af767c6bf270460ff26407d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Lins?= Date: Sun, 9 Feb 2020 17:20:11 -0300 Subject: [PATCH 3/5] Inserting build app in cli --- packages/create-react-dependency/stages/createPackageJson.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/create-react-dependency/stages/createPackageJson.js b/packages/create-react-dependency/stages/createPackageJson.js index 8f46049..336af22 100644 --- a/packages/create-react-dependency/stages/createPackageJson.js +++ b/packages/create-react-dependency/stages/createPackageJson.js @@ -14,6 +14,7 @@ const createPackageJson = (root, name) => { scripts: { start: 'react-dependency-scripts start', build: 'react-dependency-scripts build', + 'build:app': 'react-dependency-scripts build-app', test: 'react-dependency-scripts test' }, devDependencies: { From 0f38eae5e56ea55b3d64b7a70b7ba037af0ee3c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Lins?= Date: Sun, 9 Feb 2020 17:28:57 -0300 Subject: [PATCH 4/5] Inserting documentation to build app --- docs/docs/scripsts.md | 35 --------------------- packages/react-dependency-scripts/README.md | 14 +++++++-- 2 files changed, 12 insertions(+), 37 deletions(-) delete mode 100644 docs/docs/scripsts.md diff --git a/docs/docs/scripsts.md b/docs/docs/scripsts.md deleted file mode 100644 index 1eb8c8e..0000000 --- a/docs/docs/scripsts.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -id: scripts -title: Scripts -sidebar_label: Scripts ---- - -## Start the project - -Using [webpack](https://webpack.js.org/) with reference to folder `src/dev`. - -``` -npm start -// OR -yarn start -``` - -## Build the project - -Using [babel](https://babeljs.io/) with reference to folder `src/lib`. - -``` -npm build -// OR -yarn build -``` - -## Test the project - -Using [jest](https://jestjs.io/) with reference to folder `src/lib`. Is possible edit the test config in `package.json`. - -``` -npm test -// OR -yarn test -``` diff --git a/packages/react-dependency-scripts/README.md b/packages/react-dependency-scripts/README.md index 85b14de..0b1192e 100644 --- a/packages/react-dependency-scripts/README.md +++ b/packages/react-dependency-scripts/README.md @@ -2,7 +2,7 @@ [![npm version](https://badge.fury.io/js/react-dependency-scripts.svg)](https://www.npmjs.com/package/react-dependency-scripts) -## Start the project +## Start the development application Using [webpack](https://webpack.js.org/) with reference to folder `src/dev`. @@ -12,7 +12,7 @@ npm start yarn start ``` -## Build the project +## Build the library Using [babel](https://babeljs.io/) with reference to folder `src/lib`. @@ -22,6 +22,16 @@ npm build yarn build ``` +## Build the developmento application + +Using [webpack](https://webpack.js.org/) with reference to folder `src/dev`. + +``` +npm build:app +// OR +yarn build:app +``` + ## Test the project Using [jest](https://jestjs.io/) with reference to folder `src/lib`. Is possible edit the test config in `package.json`. From 980e97353235b3d5efbd030b135e46e7083e439a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Lins?= Date: Sun, 9 Feb 2020 17:31:11 -0300 Subject: [PATCH 5/5] New Version --- docs/docs/scripts.md | 45 +++++++++++++++++++ lerna.json | 2 +- packages/create-react-dependency/package.json | 2 +- .../stages/createPackageJson.js | 2 +- .../react-dependency-scripts/package.json | 2 +- 5 files changed, 49 insertions(+), 4 deletions(-) create mode 100644 docs/docs/scripts.md diff --git a/docs/docs/scripts.md b/docs/docs/scripts.md new file mode 100644 index 0000000..113b2e1 --- /dev/null +++ b/docs/docs/scripts.md @@ -0,0 +1,45 @@ +--- +id: scripts +title: Scripts +sidebar_label: Scripts +--- + +## Start the development application + +Using [webpack](https://webpack.js.org/) with reference to folder `src/dev`. + +``` +npm start +// OR +yarn start +``` + +## Build the library + +Using [babel](https://babeljs.io/) with reference to folder `src/lib`. + +``` +npm build +// OR +yarn build +``` + +## Build the developmento application + +Using [webpack](https://webpack.js.org/) with reference to folder `src/dev`. + +``` +npm build:app +// OR +yarn build:app +``` + +## Test the project + +Using [jest](https://jestjs.io/) with reference to folder `src/lib`. Is possible edit the test config in `package.json`. + +``` +npm test +// OR +yarn test +``` diff --git a/lerna.json b/lerna.json index 8800b86..372c3ce 100644 --- a/lerna.json +++ b/lerna.json @@ -2,5 +2,5 @@ "packages": ["packages/*"], "useWorkspaces": true, "npmClient": "yarn", - "version": "0.5.1" + "version": "0.6.0" } diff --git a/packages/create-react-dependency/package.json b/packages/create-react-dependency/package.json index 66e044d..3da91dd 100644 --- a/packages/create-react-dependency/package.json +++ b/packages/create-react-dependency/package.json @@ -1,6 +1,6 @@ { "name": "create-react-dependency", - "version": "0.5.1", + "version": "0.6.0", "description": "Creating react libraries", "main": "index.js", "author": "André Lins (https://andrelmlins.github.io/)", diff --git a/packages/create-react-dependency/stages/createPackageJson.js b/packages/create-react-dependency/stages/createPackageJson.js index 336af22..d74f1cd 100644 --- a/packages/create-react-dependency/stages/createPackageJson.js +++ b/packages/create-react-dependency/stages/createPackageJson.js @@ -20,7 +20,7 @@ const createPackageJson = (root, name) => { devDependencies: { react: '^16.12.0', 'react-dom': '^16.12.0', - 'react-dependency-scripts': '^0.5.1' + 'react-dependency-scripts': '^0.6.0' }, browserslist: { production: ['>0.2%', 'not dead', 'not op_mini all'], diff --git a/packages/react-dependency-scripts/package.json b/packages/react-dependency-scripts/package.json index d63c28c..45ff02a 100644 --- a/packages/react-dependency-scripts/package.json +++ b/packages/react-dependency-scripts/package.json @@ -1,6 +1,6 @@ { "name": "react-dependency-scripts", - "version": "0.5.1", + "version": "0.6.0", "description": "Scripts of react libraries", "main": "index.js", "author": "André Lins (https://andrelmlins.github.io/)",