Skip to content

Commit

Permalink
chore: add demo to dist pipeline
Browse files Browse the repository at this point in the history
  • Loading branch information
Vandish Gandhi committed Jun 26, 2019
1 parent 27a3840 commit d414acd
Show file tree
Hide file tree
Showing 91 changed files with 211 additions and 37 deletions.
2 changes: 1 addition & 1 deletion .cpd.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ exclude:
files:
- "config/**/*"
- "src/**/*"
- "docs/**/*"
- "www/**/*"
languages:
- javascript
- jsx
Expand Down
2 changes: 1 addition & 1 deletion .eslintignore
Original file line number Diff line number Diff line change
@@ -1 +1 @@
docs/examples/*
www/examples/*
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,8 @@ node_modules
# Mac related
.DS_Store

# build
build/

# Editor related
.idea/
2 changes: 1 addition & 1 deletion .sass-lint.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ options:
files:
include:
- 'src/**/*.scss'
- 'docs/**/*.scss'
- 'www/**/*.scss'
rules:
# Extends
extends-before-mixins: 2
Expand Down
10 changes: 5 additions & 5 deletions config/paths.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@ const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

module.exports = {
appBuild: resolveApp('dist'),
appBuild: resolveApp('docs'),
appDist: resolveApp('dist'),
appPublic: resolveApp('docs'),
appHtml: resolveApp('docs/index.html'),
appIndexJs: resolveApp('docs'),
appPublic: resolveApp('www'),
appHtml: resolveApp('www/index.html'),
appIndexJs: resolveApp('www/index.jsx'),
appDistJs: resolveApp('src/index.js'),
appPackageJson: resolveApp('package.json'),
appDemo: resolveApp('docs'),
appDemo: resolveApp('www'),
appSrc: resolveApp('src'),
appNodeModules: resolveApp('node_modules'),
};
3 changes: 1 addition & 2 deletions config/webpack.config.dev.build.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-eval-source-map',
entry: paths.appSrc,
output: {
path: paths.appBuild,
path: paths.appDist,
filename: 'adslot-ui.js',
libraryTarget: 'umd',
library: 'AdslotUI',
Expand Down Expand Up @@ -64,7 +64,6 @@ module.exports = webpackMerge(commonConfig, {
{
enforce: 'pre', // Lint before babel transpiles; fail fast on syntax
test: /\.(js|jsx)$/,
exclude: [/node_modules/, /(\.spec)\.(js|jsx)$/],
include: paths.appSrc,
use: ['eslint-loader'],
},
Expand Down
10 changes: 3 additions & 7 deletions config/webpack.config.dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,6 @@ module.exports = webpackMerge(commonConfig, {
// You may want 'eval' instead if you prefer to see the compiled output in DevTools.
// See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
devtool: 'cheap-module-source-map',
devServer: {
open: false,
},
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
// The first two entry points enable "hot" CSS and auto-refreshes for JS.
Expand All @@ -39,12 +36,10 @@ module.exports = webpackMerge(commonConfig, {
devtoolModuleFilenameTemplate: info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},
module: {
strictExportPresence: true,
rules: [
{
enforce: 'pre', // Lint before babel transpiles; fail fast on syntax
test: /\.(js|jsx)$/,
exclude: [/node_modules/, /(\.spec)\.(js|jsx)$/],
include: [paths.appSrc, paths.appDemo],
use: ['eslint-loader'],
},
Expand Down Expand Up @@ -82,9 +77,9 @@ module.exports = webpackMerge(commonConfig, {
},
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
loader: 'file-loader',
loader: 'url-loader',
options: {
name: 'static/media/[name].[hash:8].[ext]',
name: 'images/[name].[ext]',
},
},
],
Expand All @@ -98,6 +93,7 @@ module.exports = webpackMerge(commonConfig, {
},
plugins: [
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
new webpack.DefinePlugin({
Expand Down
3 changes: 1 addition & 2 deletions config/webpack.config.dist.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ module.exports = webpackMerge(commonConfig, {
// Don't attempt to continue if there are any errors.
bail: true,
devtool: false,
entry: { docs: [paths.appDemo], main: [paths.appDistJs] },
entry: { main: [paths.appDistJs] },
output: {
path: paths.appDist,
filename: 'adslot-ui-[name].js',
Expand Down Expand Up @@ -70,7 +70,6 @@ module.exports = webpackMerge(commonConfig, {
{
enforce: 'pre', // Lint before babel transpiles; fail fast on syntax
test: /\.(js|jsx)$/,
exclude: [/node_modules/, /(\.spec)\.(js|jsx)$/],
include: [paths.appSrc, paths.appDemo],
use: ['eslint-loader'],
},
Expand Down
177 changes: 177 additions & 0 deletions config/webpack.config.prod.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
const webpack = require('webpack');
const path = require('path');
const webpackMerge = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const safePostCssParser = require('postcss-safe-parser');
const commonConfig = require('./webpack.config');
const paths = require('./paths');
const postCssConfig = require('./postCssConfig');

// Assert this just to be safe.
if (process.env.NODE_ENV !== 'production') {
throw new Error('Production builds must have NODE_ENV=dist.');
}

// This dist is used for creating the minified .css file.
// The output .js file will be removed.
module.exports = webpackMerge(commonConfig, {
mode: 'production',
// Don't attempt to continue if there are any errors.
bail: true,
devtool: false,
entry: paths.appDemo,
output: {
// The build folder.
path: paths.appBuild,
// Generated JS file names (with nested folders).
// There will be one main bundle, and one file per asynchronous chunk.
// We don't currently advertise code splitting but Webpack supports it.
filename: 'static/adslot-ui-docs.prod.js',
publicPath: '/',
libraryTarget: 'umd',
library: 'AdslotUI',
},
externals: {
lodash: {
root: '_',
commonjs2: 'lodash',
commonjs: 'lodash',
amd: 'lodash',
},
react: {
root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react',
},
'react-dom': {
root: 'ReactDOM',
commonjs2: 'react-dom',
commonjs: 'react-dom',
amd: 'react-dom',
},
'react-redux': {
root: 'reactRedux',
commonjs2: 'react-redux',
commonjs: 'react-redux',
amd: 'react-redux',
},
moment: {
root: 'moment',
commonjs2: 'moment',
commonjs: 'moment',
amd: 'moment',
},
},
module: {
rules: [
{
enforce: 'pre', // Lint before babel transpiles; fail fast on syntax
test: /\.(js|jsx)$/,
include: [paths.appSrc, paths.appDemo],
use: ['eslint-loader'],
},
{
test: /\.(eot|ttf|woff|woff2)$/,
loader: 'url-loader',
options: {
limit: 8192,
},
},
{
test: /\.(js|jsx)$/,
include: [paths.appSrc, paths.appDemo],
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2,
sourceMap: false,
},
},
{
loader: 'postcss-loader',
options: postCssConfig,
},
'sass-loader',
],
},
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
loader: 'url-loader',
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
optimization: {
minimizer: [
new TerserPlugin({
sourceMap: false,
cache: true,
parallel: true,
terserOptions: {
ecma: 8,
compress: {
warnings: false,
comparisons: false,
inline: 2,
drop_console: true,
},
output: {
comments: false,
},
},
}),
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
parser: safePostCssParser,
map: false,
},
}),
],
},
plugins: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
template: path.resolve('index.html'),
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"',
}),
new MiniCssExtractPlugin({
filename: 'static/adslot-ui-docs.prod.css',
}),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
});
7 changes: 1 addition & 6 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,13 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Adslot UI</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,700" rel="stylesheet">
<link href="./dist/adslot-ui-main.css" rel="stylesheet">
<link href="./dist/adslot-ui-docs.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,700" rel="stylesheet">
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="app"></div>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.production.min.js"
integrity="sha256-R9mHnFtrqNBSv0u7IGrwrn8TxfZaWD0UjHo9xvqDHSM="
Expand All @@ -34,7 +31,5 @@
integrity="sha256-L3S3EDEk31HcLA5C6T2ovHvOcD80+fgqaCDt2BAi92o="
crossorigin="anonymous"
></script>
<script src="./dist/adslot-ui-main.js"></script>
<script src="./dist/adslot-ui-docs.js"></script>
</body>
</html>
15 changes: 8 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,17 @@
"license": "MIT",
"scripts": {
"protect-master": "./scripts/protect-master",
"clean": "rimraf dist/*",
"clean": "rimraf dist/* docs/*",
"codecov": "cat coverage/coverage-final.json | codecov",
"dist:dev": "node ./scripts/build.js",
"dist:prod": "cross-env NODE_ENV=dist node ./scripts/build.js",
"dist": "npm run clean && npm run dist:prod && npm run dist:dev ",
"dist:demo": "cross-env NODE_ENV=production node ./scripts/build.js",
"dist": "npm run clean && npm run dist:prod && npm run dist:dev && npm run dist:demo",
"lint:sass": "sass-lint -v",
"lint:eslint": "eslint --ext .jsx,.js ./src && eslint --ext .jsx,.js ./docs",
"lint:prettier": "prettier-check '{src,docs,config}/**/*.{js,json,jsx}'",
"lint:eslint": "eslint --ext .jsx,.js ./src && eslint --ext .jsx,.js ./www",
"lint:prettier": "prettier-check '{src,www,config}/**/*.{js,json,jsx}'",
"lint": "npm run lint:eslint && npm run lint:sass && npm run lint:prettier",
"prettier": "prettier \"{src,docs,config}/**/*.{js,json,jsx}\" --write",
"prettier": "prettier \"{src,www,config}/**/*.{js,json,jsx}\" --write",
"posttest": "npm run lint",
"postversion": "git push -u origin $(git rev-parse --abbrev-ref HEAD) --follow-tags && npm publish && echo '…released.'",
"preversion": "echo 'Releasing…' && npm i",
Expand All @@ -29,7 +30,7 @@
"start": "node scripts/start.js",
"test": "scripts/test --coverage",
"test:watch": "scripts/test --watch",
"version": "echo '…generating dist…' && npm run dist && git add dist/*",
"version": "echo '…generating dist…' && npm run dist && git add dist/* docs/*",
"scaffold": "./scripts/scaffold",
"autorelease": "node scripts/release"
},
Expand All @@ -46,7 +47,7 @@
"printWidth": 120
},
"lint-staged": {
"{src,docs,config}/**/*.{js,json,jsx}": [
"{src,www,config}/**/*.{js,json,jsx}": [
"prettier --write",
"git update-index --again"
]
Expand Down
10 changes: 7 additions & 3 deletions scripts/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,12 @@ process.on('unhandledRejection', err => {
const chalk = require('chalk');
const fs = require('fs-extra');
const webpack = require('webpack');
const config =
process.env.NODE_ENV === 'dist' ? require('../config/webpack.config.dist') : require('../config/webpack.config.dev.build');

let config;
if (process.env.NODE_ENV === 'dist') config = require('../config/webpack.config.dist');
else if (process.env.NODE_ENV === 'production') config = require('../config/webpack.config.prod');
else config = require('../config/webpack.config.dev.build');

const paths = require('../config/paths');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
Expand All @@ -23,7 +27,7 @@ const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;

const buildPath = process.env.NODE_ENV === 'dist' ? paths.appDist : paths.appBuild;
const buildPath = !process.env.NODE_ENV || process.env.NODE_ENV === 'dist' ? paths.appDist : paths.appBuild;

// Warn and crash if required files are missingclear
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
Expand Down
Loading

0 comments on commit d414acd

Please sign in to comment.