# javascript-project-scripts

> Common Scripts and setup files across projects

Latest version **8.0.0** (published 2024-04-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install javascript-project-scripts
pnpm add javascript-project-scripts
yarn add javascript-project-scripts
bun add javascript-project-scripts
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 8.0.0 |
| Published | 2024-04-20 |
| First published | 2020-02-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=20.0.0 |
| Dependencies | 48 |
| Unpacked size | 14.9 KB |
| Known vulnerabilities | 0 (+19 in 5 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Ben Archer |
| Maintainers | archer56 |

## Links

- npm: https://www.npmjs.com/package/javascript-project-scripts
- Repository: https://github.com/archer56/project-scripts
- Homepage: https://github.com/archer56/project-scripts#readme
- Issues: https://github.com/archer56/project-scripts/issues
- npm.io page: https://npm.io/package/javascript-project-scripts

## Dependencies (48)

- [sass](https://npm.io/package/sass.md) 1.61.0
- [which](https://npm.io/package/which.md) 3.0.0
- [arrify](https://npm.io/package/arrify.md) 2.0.1
- [eslint](https://npm.io/package/eslint.md) 9.1.0
- [lodash](https://npm.io/package/lodash.md) 4.17.21
- [postcss](https://npm.io/package/postcss.md) 8.4.19
- [webpack](https://npm.io/package/webpack.md) 5.75.0
- [prettier](https://npm.io/package/prettier.md) 3.2.5
- [css-loader](https://npm.io/package/css-loader.md) 6.7.2
- [typescript](https://npm.io/package/typescript.md) 5.0.4
- [url-loader](https://npm.io/package/url-loader.md) 4.1.1
- [@babel/core](https://npm.io/package/@babel/core.md) 7.20.2
- [file-loader](https://npm.io/package/file-loader.md) 6.2.0
- [read-pkg-up](https://npm.io/package/read-pkg-up.md) 7.0.1
- [sass-loader](https://npm.io/package/sass-loader.md) 13.2.0
- [webpack-cli](https://npm.io/package/webpack-cli.md) 5.0.0
- [autoprefixer](https://npm.io/package/autoprefixer.md) 10.4.13
- [babel-loader](https://npm.io/package/babel-loader.md) 9.1.0
- [webpack-merge](https://npm.io/package/webpack-merge.md) 5.8.0
- [postcss-import](https://npm.io/package/postcss-import.md) 15.0.0
- [postcss-loader](https://npm.io/package/postcss-loader.md) 7.0.1
- [react-hot-loader](https://npm.io/package/react-hot-loader.md) 4.13.1
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) 7.20.2
- [@webpack-cli/serve](https://npm.io/package/@webpack-cli/serve.md) ^2.0.0
- [postcss-preset-env](https://npm.io/package/postcss-preset-env.md) 7.8.3
- [resolve-url-loader](https://npm.io/package/resolve-url-loader.md) 5.0.0
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) 4.11.1
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) 7.18.6
- [babel-plugin-lodash](https://npm.io/package/babel-plugin-lodash.md) 3.3.4
- [copy-webpack-plugin](https://npm.io/package/copy-webpack-plugin.md) 11.0.0
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) 7.34.1
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) 5.5.0
- [@babel/eslint-parser](https://npm.io/package/@babel/eslint-parser.md) 7.19.1
- [eslint-config-airbnb](https://npm.io/package/eslint-config-airbnb.md) 19.0.4
- [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) 2.29.1
- [eslint-config-prettier](https://npm.io/package/eslint-config-prettier.md) 9.1.0
- [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) 6.8.0
- [eslint-plugin-prettier](https://npm.io/package/eslint-plugin-prettier.md) 5.1.3
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) 2.7.0
- [@babel/preset-typescript](https://npm.io/package/@babel/preset-typescript.md) 7.18.6
- [@typescript-eslint/parser](https://npm.io/package/@typescript-eslint/parser.md) 7.7.0
- [eslint-plugin-react-hooks](https://npm.io/package/eslint-plugin-react-hooks.md) 4.6.0
- [babel-plugin-styled-components](https://npm.io/package/babel-plugin-styled-components.md) ^2.1.4
- [@babel/plugin-transform-runtime](https://npm.io/package/@babel/plugin-transform-runtime.md) 7.19.6
- [@typescript-eslint/eslint-plugin](https://npm.io/package/@typescript-eslint/eslint-plugin.md) 7.7.0
- [@babel/plugin-syntax-dynamic-import](https://npm.io/package/@babel/plugin-syntax-dynamic-import.md) 7.8.3
- [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) 7.18.6
- [babel-plugin-transform-react-remove-prop-types](https://npm.io/package/babel-plugin-transform-react-remove-prop-types.md) 0.4.24

## Recent versions

- 8.0.0 (latest) — 2024-04-20
- 7.0.1 — 2023-09-29
- 7.0.0 — 2023-04-08
- 6.0.2 — 2022-12-24
- 6.0.1 — 2022-11-26
- 6.0.0 — 2022-11-26
- 5.2.5 — 2022-09-26
- 5.2.4 — 2022-09-26
- 5.2.3 — 2022-08-10
- 5.2.2 — 2022-08-10
- 5.2.1 — 2022-08-03
- 5.2.0 — 2022-07-26
- 5.0.0 — 2021-12-07
- 3.5.2 — 2021-07-28
- 3.5.1 — 2021-07-28
- … 27 more at https://npm.io/package/javascript-project-scripts/versions

## README

# JavaScript Project Scripts
Common Scripts and setup files across projects

## Babel

Create a file called `babel.config.js` in the root directory. 

To use purely the default settings add:

```js 
  const babel = require('javascript-project-scripts/babel');

  module.exports = babel;
```

To add your own settings, something like this:
```js
module.exports = api => {
  const { plugins, presets } = babel(api);
  /*
  .....
  */
  return {
    plugins,
    presets,
  };
};
```

## ESLint
To use the eslint configuration create `.eslintrc.js` in your root directory then add the following:

### Options

|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|`language`|`{String}`|`'javascript'`|Provides language specific linting rules|

### Example
```js
  const options = {
    language: 'javascript',
  };

  module.exports = require('javascript-project-scripts/lib/eslintrc.js')(options);
```

Secondly create `.prettierrc.js` in your root directory and add the following:

```js
  module.exports = require('javascript-project-scripts/lib/prettierrc.js');
```

## Webpack

### Required dependancies
**Remove** all references to babel and webpack that you are not actively using. (We will take care of most of the dependancies)

### Setup
- Create a file in the root directory called `webpack.config.js`
- The following are `required` fields:
  - mode - `(Required)` denotes which configuration we give you from `javascript-project-scripts`
  - config - See webpack documentation for more information, but you can add any configuration overrides here
    - entry `(Required)`
    - output `(Required)`
    - Plugins
      - MiniCssExtractPlugin `(Required)`

```js
  const webpackConfig = require('javascript-project-scripts/webpack.config');
  const path = require('path');
  const { MiniCssExtractPlugin } = require('javascript-project-scripts');

  const options = {};

  module.exports = webpackConfig({
    mode: "production",
    config: {
      entry: "./src/index.js",
      output: {
        filename: "bundle.[contenthash].js",
        path: path.resolve(__dirname, "dist")
      },
      plugins: [ 
        new MiniCssExtractPlugin({
          filename: `bundle.min.css`,
        }),
      ]
    },
    ...options,
  });
```

### Options
This applies to both the Full and Tiered setups

|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|`assetsDir`|`{String}`|`'assets'`|Sets where in the distribution file defined in `output` where assets such as images and css files will be stored.|
|`relativeModulesPath`|`{String}`|`'./node_modules'`|For Projects that have non-standard setups or are mono-repos. This allows points webpack to the hoisted node_modules location.|
|`sourceMap`|`{Boolean}`|`false`|Enables source maps across, CSS and JavaScript.|
|`devServerOptions`|`{Object}`|`{}`|Overrides to the default webpack dev server settings|
|`sourceDir`|`{String}`|`./src`|Sets the source Directory|

### PostCss loader
This loader lives inside the css rules, you need to define a config that can be empty if you don't want it to do anything, but we advice you take the config from `javascript-project-scripts`.

This current setup sets up autoprefixer that matches against the current browserlist ensuring that your css is going to work across the supported browsers.

Create a file called `postcss.config.js` on your root directory.
```js
  module.exports = require('javascript-project-scripts/postcss.config');
```
  
 

### Important Notes
- `NODE_ENV` must be **explicitly** set to production when building the production bundle.

## TypeScript
### ESlint
Ensure Babel language is set to `typescript`

### TS Config
Add the file `tsconfig.json` to the root directory and add the following
```json
{
  "extends": "javascript-project-scripts/tsconfig.json",
}
```

---
_Source: https://npm.io/package/javascript-project-scripts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._