wix-node-build
A tool for common tasks in node projects that generated by wix node generator.
Supported features
- Transpile to ES6/Typescript
- Support React/Angular 1.x (2.0 will be supported soon)
- E2E tests using protractor
- Unit tests using Jest/Mocha/karma
- ESlint/TSlint
- CSS Modules
- Sass
- Local dev environment running node server / cdn server
- Wallaby
- async/await (
babel-polyfill
needed) - Minify/Uglify
- Bundle JS/CSS using Webpack
- External/Inline css
Install
npm install --save-dev wix-node-build
Sample usage
In your package.json
:
{
"scripts": {
"start": "wix-node-build start",
"test": "wix-node-build test",
"build": "wix-node-build lint && wix-node-build build",
"release": "wix-node-build release" //only needed if you publish to npm
...
}
}
Or within the command-line:
wix-node-build [command] [options]
CLI
The following sections describe the available tasks in wix-node-build
. You can always use the --help
flag for every task to see its usage.
start
Flag | Short Flag | Description | Default Value |
---|---|---|---|
--entry-point | -e | Entry point for the app. | ./dist/index.js |
--watch | -w | Watches project files, rebuilds and restarts on change. | false |
This will run the specified (server) entryPoint
file and mount a CDN server.
The following are the default values for the CDN server's port and the mount directory. You can change them in your package.json
:
"wix": {
"servers": {
"cdn": {
"port": 3200,
"dir": "dist/statics"
}
}
}
build
Flag | Short Flag | Description | Default Value |
---|---|---|---|
--dirs <dirs,...> | Transpile the files inside the specified directories (comma-separated list). This option will also copy the assets/ folder in those directories. |
app,src,test |
|
--output | The output directory for static assets. | statics |
|
--context | The directory used for resolving entries. More info here. | src |
This task will perform the following:
- Compile using
TypeScript
(*.ts
) orbabel
(*.js
) files intodist/
. In case you do not want to transpile server (node), you can remove.babelrc
/tsconfig
/package json'sbabel
key. If you still need those (for transpiling client code), please usewix.runIndividualTranspiler
. - Copy assets to
dist
folder (ejs/html/images...). Files located in${dirs}/assets
will be copied to the output directory specified in flag. - Bundle the entry points using Webpack and compile
sass
files when--bundle
flag is on.
You can specify multiple entry points in your package.json
file. This gives the ability build multiple bundles at once. More info about Webpack entries can be found here.
"wix": {
"entry": {
"a": "./a",
"b": "./b",
"c": ["./c", "./d"]
}
}
Note: the decision whether to use TypeScript
or babel
is done by searching tsconfig.json
inside the root directory.
css
-
By default, your
require
d css will bundled to a separateapp.css
bundle. You can leave your css in main js bundle by adding the following to yourpackage.json
:"wix": { "separateCss": false }
-
We use css modules as default. You can disable this option any time by adding the following to wix section inside your
package.json
:"wix": { "cssModules": false }
Using css modules inside your component is easy:
import s from './Counter.scss';//import css/scss <p className={s.mainColor}>{counterValue}</p>
Using css when css modules are turned off:
import s from './Counter.scss';//import css/scss <p className="mainColor">{counterValue}</p>
test
Flag | Description |
---|---|
--mocha | Run unit tests with Mocha - this is the default |
--jasmine | Run unit tests with Jasmine |
--karma | Run tests with Karma (browser) |
--jest | Run tests with Jest |
--protractor | Run e2e tests with Protractor (e2e) |
By default, this task executes both unit test (using mocha
as default) and e2e test using protractor
.
Default unit test glob is {test,app,src}/**/*.spec.+(js|ts)
. You can change this by adding the following to your package.json:
wix: {
specs: {
node: 'my-crazy-tests-glob-here'
}
}
-
Note that when specifying multiple flags, only the first one will be considered, so you can't compose test runners (for now).
-
Mocha tests setup:
You can add a
test/mocha-setup.js
file, with mocha tests specific setup. Mocha willrequire
this file, if exists. Example for suchtest/mocha-setup.js
:import 'babel-polyfill'; import 'isomorphic-fetch'; import sinonChai from 'sinon-chai'; import chaiAsPromised from 'chai-as-promised'; import chai from 'chai'; chai.use(sinonChai); chai.use(chaiAsPromised);
Karma
When running tests using Karma, make sure you have the right configurations in your package.json
as described in wix.specs
section. In addition, if you have a karma.conf.js
file, the configurations will be merged with our built-in configurations.
lint
Flag | Short Flag | Description |
---|---|---|
--client | -c | Runs linters for client only (stylelint ). |
Executes TSLint
or ESLint
(depending on the type of the project) over all matched files. An '.eslintrc' / tslint.json
file with proper configurations is required.
release
Bump package.json
version and publish to npm using wnpm-release
.
Configurations
Configurations are meant to be inside package.json
under wix
section or by passing flags to common tasks.
Flags
See above sections.
package.json
Configurations in wix.separateCss
Explanation is in cli/build section.
wix.entry
Explanation is in cli/build section.
wix.servers.cdn
Explanation is in cli/start section.
wix.specs
Specs globs are configurable. browser
is for karma, node
is for mocha and jasmine.
{
"wix": {
"specs": {
"browser": "dist/custom/globs/**/*.spec.js",
"node": "dist/custom/globs/**/*.spec.js"
}
}
}
For example:
{
"wix": {
"specs": {
"browser": "dist/src/client/**/*.spec.js",
"node": "dist/src/server/**/*.spec.js"
}
}
}
wix.runIndividualTranspiler
In case you don't want to transpile your server (node) code, and you still need .babelrc
/tsconfig
, you can add runIndividualTranspiler
flag to skip server transpiling.
wix.externalUnprocessedModules
You can explicitly ask build process to transpile some node modules in case those modules do not contain transpiled code. Note that this is not a recommended workflow. It can be very error prone:
- It might be for example that your app babel config and the node module babel config will be conflicting.
- Any babel plugin that is used by your dependencies will need to be installed by your app as well.
- You'll need to also add nested dependencies that need transpiling into array, which can be confusing.
Anyway, if you don't have a better alternative you can pass array with module names in this property.
wix.output.library
If set, export the bundle as library. wix.output.library
is the name.
Use this if you are writing a library and want to publish it as single file.
wix.output.libraryTarget
Which format to export the library:
"var"
- Export by setting a variable: var Library = xxx (default)
"this"
- Export by setting a property of this: this["Library"] = xxx
"commonjs"
- Export by setting a property of exports: exports["Library"] = xxx
"commonjs2"
- Export by setting module.exports: module.exports = xxx
"amd"
- Export to AMD (optionally named - set the name via the library option)
"umd"
- Export to AMD, CommonJS2 or as property in root
Default: "var"
If wix.output.library
is not set, but wix.output.libraryTarget
is set to a value other than var
, every property of the exported object is copied (Except amd
, commonjs2
and umd
).
##Examples
##FAQ