diff --git a/docs/docs/scripsts.md b/docs/docs/scripts.md similarity index 67% rename from docs/docs/scripsts.md rename to docs/docs/scripts.md index 1eb8c8e..113b2e1 100644 --- a/docs/docs/scripsts.md +++ b/docs/docs/scripts.md @@ -4,7 +4,7 @@ title: Scripts sidebar_label: Scripts --- -## Start the project +## Start the development application Using [webpack](https://webpack.js.org/) with reference to folder `src/dev`. @@ -14,7 +14,7 @@ npm start yarn start ``` -## Build the project +## Build the library Using [babel](https://babeljs.io/) with reference to folder `src/lib`. @@ -24,6 +24,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`. 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 8f46049..d74f1cd 100644 --- a/packages/create-react-dependency/stages/createPackageJson.js +++ b/packages/create-react-dependency/stages/createPackageJson.js @@ -14,12 +14,13 @@ 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: { 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/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`. diff --git a/packages/react-dependency-scripts/configs/webpack.config.js b/packages/react-dependency-scripts/configs/webpack.config.js index f36cfac..eab01a9 100644 --- a/packages/react-dependency-scripts/configs/webpack.config.js +++ b/packages/react-dependency-scripts/configs/webpack.config.js @@ -1,55 +1,102 @@ -"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', + resolverPath('node_modules'), + resolverPath('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..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/)", @@ -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); +}); 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,