4.2.0 • Published 4 months ago

@rockpack/compiler v4.2.0

Weekly downloads
228
License
MIT
Repository
github
Last release
4 months ago

@rockpack/compiler

@rockpack/compiler is React bundler (based on Webpack) using a set of necessary loaders, plugins and using the best practices out of the box.

@rockpack/compiler this module is part of the Rockpack project. See more details on the official site.

@rockpack/compiler can help you with:

  • Compile your React application (TS/Babel)
  • Compile React Component or VanillaJS UMD library (TS/Babel)
  • Nodejs backend (TS/Babel)
  • Markup html files
  • Compile isomorphic (Server-side rendering) application (TS/Babel)
  • Bundle analyze (TS/Babel)

Features:

  • Webpack 5+, Webpack-dev-server 4+
  • TypeScript support
  • Babel 7, Babel-preset-env (> 5%)
  • Support build nodejs scripts with nodemon
  • Hot Module Replacement for SPA
  • Livereload for SSR
  • Source maps and Extended dev mode
  • Dotenv support and Dotenv safe support
  • React optimizations
  • Monorepo support
  • Write file webpack plugin (in dev mode)
  • Copy Webpack Plugin
  • ESLint support
  • Stylelint support
  • Templates: HTML/Jade/Handlebars
  • CSS: CSS/SASS (dart-sass)/LESS + Postcss
  • PostCSS: autoprefixer, postcss-custom-media, postcss-media-minmax
  • CSS Modules support
  • Imagemin
  • Formats support: Markdown, Video, Audio, Fonts, SVG, Script, Shaders etc
  • SVG + SVGO, SVGR (import SVG like React Component)
  • Antd optimizations (With optimizations: auto replace momentjs to dayjs, import antd)
  • Terser minification
  • Generate stats.json (in production mode)
  • SEO Optimizations
  • Bundle Analyze (webpack-bundle-analyzer, Statoscope)
  • Isomorphic compile support (include isomorphic styles, isomorphic dynamic imports - @loadable)
  • Vendor array splitting support (You can set dependency libraries to this array to split it on separate vendor.js file)
  • MD/MDX support
  • GraphQL support (webpack-graphql-loader)
  • Сross-env included

Using

create-react-app like bundling example:

  1. Installation:
# NPM
npm install @rockpack/compiler --save-dev

# YARN
yarn add @rockpack/compiler --dev
  1. Make build.js in the root of project

  2. Put the code:

const { frontendCompiler } = require('@rockpack/compiler');

frontendCompiler();
  1. Run build.js:
cross-env NODE_ENV=development node build

For production build you need run

cross-env NODE_ENV=production node build

Your app will be built, minified, and optimized for production.

Details:

@rockpack/compiler includes compilers:

const {
  isomorphicCompiler,
  markupCompiler,
  libraryCompiler,
  frontendCompiler,
  backendCompiler,
} = require('@rockpack/compiler');

frontendCompiler(optionsoptional, callbackoptional);

frontendCompiler will build a create-react-app style React app (Babel / TypeScript)

Options - The settings object is the same for each compiler type:

PropValueDefault valueDescription
distString'./dist'The path for compiled app, by default dist
srcString'./src'The path for application source. By default "src", where will be find index.{js|jsx|ts|tsx}
debugBooleanfalseDebug option. Save source maps. It helps to find difficult bugs in minified code in production mode
htmlBoolean/ObjectundefinedThis setting will activate Html webpack plugin. You can override the default index.ejs template. Example: { title: String, favicon: Stringpath to favicon, template: Stringpath_to_template }
portNumber3000webpack-dev-server's port
stylesStringundefinedThe path for CSS extraction (mini-css-extract-plugin)
bannerStringundefinedThis parameter allows you to add a banner to JS and CSS files
globalObjectundefinedAllows forcing global variables using webpack.ProvidePlugin
copyObject/ArrayundefinedCopies files and folders using copy-webpack-plugin. Format: {from: ... to: ...} or [] or {files: [], opts: {}}
const { frontendCompiler } = require('@rockpack/compiler');

frontendCompiler({
  dist: 'public',
  src: 'src/main.js',
  debug: true,
  html: {
    title: 'New app',
    favicon: './favicon.ico',
    template: './index.ejs' // Supports html, hbs, ejs
  },
  port: 8900
});

Callback - each compiler has the last parameter - callback. This is a function in which you can override the properties of the generated webpack config.

In this example, alias will be extended via a callback function

const { frontendCompiler } = require('@rockpack/compiler');

frontendCompiler({}, webpackConfig => {
  Object.assign(finalConfig.resolve, {
    alias: {
      react: '<path to react>'
    }
  });
});

backendCompiler(optionsoptional, callbackoptional);

Compiles a Node.js application. When you run this compiler with NODE_ENV development, nodemon will be launched to restart the application after changes

const { backendCompiler } = require('@rockpack/compiler');

backendCompiler(options, webpackConfig => {
  Object.assign(finalConfig.resolve, {
    alias: // add some aliases
  });
});

libraryCompiler(libraryNameneeded, optionsoptional, callbackoptional);

Compile React Component or VanillaJS UMD library

const { libraryCompiler } = require('@rockpack/compiler');

libraryCompiler('MyLib', options);

libraryName может принимать объект с дополнительными настройками:

const { libraryCompiler } = require('@rockpack/compiler');

libraryCompiler({
  name: 'MyLib',
  cjs: {
    src: './src',
    dist: './lib/cjs'
  },
  esm: {
    src: './src',
    dist: './lib/esm'
  },
  externals: [
    'react',
     'react-dom'
  ]
}, options);

markupCompiler(pathsneeded, optionsoptional, callbackoptional);

Allows to process HTML files (HTML, handlebars, jade). Useful for markup

const { markupCompiler } = require('rocket-starter');

markupCompiler(
  './src/**/*.{html,hbs,jade,njk}', // Glob format supported
  options,
  webpackConfig => {
    Object.assign(finalConfig.resolve, {
      alias: // add some aliases
    });
  });

isomorphicCompiler(configsneeded);

Compiles an SSR application.

const { isomorphicCompiler, backendCompiler, frontendCompiler } = require('rocket-starter');

isomorphicCompiler(
  frontendCompiler({
    src: 'src/client.jsx',
    dist: 'public',
  }),
  backendCompiler({
    src: 'src/server.jsx',
    dist: 'dist',
  })
);

You can see more examples in "examples" folder - here

Q&A

How do I activate TypeScript?


How do I activate Eslint?

  • *It's enough to put .eslintrc.js or .eslintrc.development.js for DEV mode or .eslintrc.production.js for PRODUCTION mode in the root with @rockpack/compiler*

How do I activate Stylelint?

  • *It's enough to put .stylelintrc or stylelint.config.js in the root with @rockpack/compiler*

How do I extend PostCSS?

  • *It's enough to put postcss.config.js in the root with @rockpack/compiler*

Can I extend the webpack.config generated by @rockpack/compiler?

  • Sure! This is one of the fundamental differences from create-react-app, out of the box extensibility without eject
  • An example to work with Elm:
const { frontendCompiler } = require('@rockpack/compiler');
const WebpackNotifierPlugin = require('webpack-notifier');

frontendCompiler({
  banner: true,
  styles: 'style.css',
  vendor: ['react', 'react-dom', 'core-js']
}, (config, modules, plugins) => {
  config.resolve.extensions = ['.js', '.elm'];

  modules.set('elm', {
    test: /\.elm$/,
    exclude: [/elm-stuff/, /node_modules/],
    use: process.env.NODE_ENV === 'development' ? [
      { loader: 'elm-hot-webpack-loader' },
      {
        loader: 'elm-webpack-loader',
        options: {
          forceWatch: true
        }
      }
    ] : [
      {
        loader: 'elm-webpack-loader',
        options: {
          optimize: true
        }
      }
    ]
  });

  plugins.set('WebpackNotifierPlugin', new WebpackNotifierPlugin());
});

How to make Rockpack save changes to HDD on DEV build?

  • *Need to add to config write: true*

How do I process the TypeScript library to keep the sources?

  • *libraryCompiler takes as the first parameter not only the string-name of the library, but also an object with parameters*
libraryCompiler({
  name: 'Color',
  cjs: {
    src: './src',
    dist: './lib/cjs'
  },
  esm: {
    src: './src',
    dist: './lib/esm'
  }
});

TypeScript sources will be saved in ESM and CJS format at the specified path.


How to work with CSS (SCSS, LESS) Modules?

  • You need to rename the file with modular styles to the format filename.module.scss
import styles from './App.module.css';

<div className={styles.App}>

CSS Modules support TypeScript with generating definitions - @teamsupercell/typings-for-css-modules-loader


The MIT License

MIT

4.0.0

5 months ago

4.2.0

4 months ago

4.0.0-next.1

6 months ago

4.0.0-next.5

6 months ago

4.0.0-next.4

6 months ago

4.0.0-next.3

6 months ago

4.0.0-next.2

6 months ago

4.1.0

5 months ago

3.0.3

1 year ago

3.1.1

1 year ago

3.1.0

1 year ago

3.0.0-next.4

1 year ago

3.0.0-next.5

1 year ago

3.0.2

1 year ago

3.0.1

1 year ago

3.0.0

1 year ago

3.0.0-next.2

2 years ago

3.0.0-next.1

2 years ago

3.0.0-next.3

2 years ago

2.0.0-rc.35

2 years ago

2.0.0-rc.36

2 years ago

2.0.0-rc.33

2 years ago

2.0.0-rc.34

2 years ago

2.0.0-rc.31

2 years ago

2.0.0-rc.32

2 years ago

2.0.1

2 years ago

2.0.0-rc.30

2 years ago

2.0.0-rc.29

2 years ago

2.0.0-rc.28

2 years ago

2.0.0-rc.27

2 years ago

2.0.0-rc.26

3 years ago

2.0.0-rc.24

3 years ago

2.0.0-rc.25

3 years ago

2.0.0-rc.23

3 years ago

2.0.0-rc.22

3 years ago

2.0.0-rc.21

3 years ago

2.0.0-rc.20

3 years ago

2.0.0-rc.19

3 years ago

2.0.0-rc.18

3 years ago

2.0.0-rc.17

3 years ago

2.0.0-rc.16

3 years ago

2.0.0-rc.15

3 years ago

2.0.0-rc.13

3 years ago

2.0.0-rc.14

3 years ago

2.0.0-rc.11

3 years ago

2.0.0-rc.12

3 years ago

2.0.0-rc.10

3 years ago

2.0.0-rc.9

3 years ago

2.0.0-rc.8

3 years ago

2.0.0-rc.7

3 years ago

2.0.0-rc.6

3 years ago

2.0.0-rc.5

3 years ago

2.0.0-rc.4

3 years ago

2.0.0-rc.3

3 years ago

2.0.0-rc.2

3 years ago

2.0.0-rc.1

3 years ago

1.9.0

3 years ago

1.8.0

3 years ago

1.6.1

3 years ago

1.6.0

3 years ago

1.5.0

3 years ago

1.1.0

3 years ago

1.0.0

3 years ago

0.9.9-rc.22

3 years ago

0.9.9-rc.21

3 years ago

0.9.9-rc.20

3 years ago

0.9.9-rc.19

3 years ago

0.9.9-rc.18

3 years ago

0.9.9-rc.17

3 years ago

0.9.9-rc.16

3 years ago

0.9.9-rc.15

3 years ago

0.9.9-rc.14

3 years ago

0.9.9-rc.13

3 years ago

0.9.9-rc.12

3 years ago

0.9.9-rc.11

3 years ago

0.9.9-rc.10

4 years ago

0.9.9-rc.9

4 years ago

0.9.9-rc.8

4 years ago

0.9.9-rc.7

4 years ago

0.9.9-rc.5

4 years ago

0.9.9-rc.6

4 years ago

0.9.9-rc.3

4 years ago

0.9.9-rc.2

4 years ago

0.9.9-rc1

4 years ago

0.9.9

4 years ago

0.9.0

4 years ago