Less (is more) than react-scripts
npm install @tty-pt/scriptsThis library is similar to react-scripts, in that it gives you default configurations you can use to build, watch, test, storybook, lint and develop your projects.
However, in it there's an effort to make customization and configuration as simple and flexible as possible.
For example, a lot of things can be customized via simple package.json properties, or we can even provide the original configuration files for each of its constituent parts. We can easily override base-config.js, and others, or we can make use of the defaults, or a mix of both. Without need for additional dependencies.
Additionally, it is faster than react-scripts. And it can save you having to specify all this devDependencies in your own projects. And from a lot of boilerplate.
As an example, I'm using pnpm as a package manager. But you can do the equivalent thing with npm.
sh
pnpm dlx @tty-pt/scripts init # and follow the instructions
`Other Scripts
These are some of the common scripts we can run. Don't forget to have a corresponding "script" in your package.json, with the value set to "scripts \".build
> Build the projectstart
> Start the development server (for apps)watch
> Watch and auto-build (for libraries)lint
> Lint projecttest
> Test projectstorybook
> Run storybookSimple Configuration
Configuration is meant to be as easy as possible. Without the need to dwelve into the complexities of the different tooling needed to build the project. It should, in most cases, be a matter of adding a couple of properties to package.json.Some standard ones are also used to inform scripts about your project. Like "main" and others like it. Scripts knows how to build your projects to multiple module formats if you provide it with these kinds of properties.
entry
This property specifies the entry point of your library or application. An example of it would be "./src/index.js".template
In case you are dealing with an application, or a library that also has an app, you can specify the "template" property. It lets you say which html template to use for the app.library
If you are building a library, you can use this property to specify its name. Meaning, the global object it may export to.You can also set this to "true", and it will use something akin to the package name. But in most cases, you shouldn't need to.
parser
You can use this property to specify the transpiler. Some possible values are: "swc", "babel" or "esbuild". If a ".swcrc" is present, scripts will know to use swc, and you don't have to do this. Likewise if babel.config.js is present.minimizer
This property can be used to specify the minimizer. It can be "swc", "esbuild" or "terser". By default, "esbuild" is used.publicPath
You can use this property to specify the publicPath of your application in production mode.development
You can use this (with a value of "true") so that scripts will build your thing in development mode, and not minify.external
This should be an object, in which each key is a library name, and the values are externals. You can specify these the same way you'd specify externals in webpack.cdn
With this, you can specify an entry point for your externals. For example, react's umd entry point is usually "umd/react.production.min.js".This is also supposed to be an object in which keys are dependency names, and values are things like this. They can also be "true".
If they are true, they will resolve automatically and use the default CDN.
You can also prepend every value with a string like:
.And override the default cdn by setting cdn.default.
serve
This should be an array of strings, indicating which folders should be served by the development server.outputConfig
Set this to "true" to output the generated configuration to /tmp/scripts.config.json.Advanced Configuration
In many situations, you don't have to do much. You can just set the package.json properties mentioned in the "Simple Configuration" section.However, if you wish to have more granular control, you can also provide your own configuration files. Or link those provided by scripts.
more in-depth config
If you wish to customize scripts even further,
you can do something like:
`js
const makeConfigs = require("@tty-pt/scripts/base-config");module.exports = function (env) {
const configs = makeConfigs(env);
// apply even more changes - technical
return configs;
};
``