-
Notifications
You must be signed in to change notification settings - Fork 21
Part 7: Node and Webpack
Q: What are these exports
, module.exports
and export
, export default
?
-
for node:
exports
andmodule.exports
-
for es6:
export
,export default
, andimport
-
for both node and es6:
require
Node.js treats each file as a separate module (see official docs), and different files/modules do not share the namespace. Each file/module has an "API" for access called module.exports. module.exports
is an object {}
, and exports
provides a way to write into that object. For example, exports.name = 1;
will modify module.exports
to be {name:1}
.
In ES6 JS, export
and export default
are the equivalent to Node's exports
(see MDN docs):
There are two different types of export, named and default. You can have multiple named exports per module but only one default export.
Named export need to specify the same name during import
, but default export can be imported under any name.
let k; export default k = 12; // in file test.js
import m from './test' // note that we have the freedom to use import m instead of import k, because k was default export
console.log(m); // will log 12
require()
works for both Node and ES6. In Node, require()
is linked to the module.exports
object.
Q: How do the package.json
's scripts work with react-scripts
?
This project is bootstrapped with Facebook's Create-React-App. And react-scripts
is a key package for create-react-app
. It is the portal for any customized configuration setup. The scripts that react-scripts
run are specified in /node_modules/react-scripts/scripts/
.
So when you run scripts in the package.json
:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
...
}
you are asking react-scripts
to run the scripts like /node_modules/react-scripts/scripts/start.js
or /node_modules/react-scripts/scripts/build.js
to execute the scripts with node
:
$ node ./node_modules/react-scripts/scripts/start.js
# = npm run start
$ node ./node_modules/react-scripts/scripts/build.js
# = npm run build
# npm run = npm run-script
...
Inside the scripts from react-scripts
, these tasks have been taken care of:
- set up a
webpack-dev-server
- set up an http server based on
express
- ESlint and babel etc...
The npm scripts syntax are compatible with bash
syntax
"scripts": {
"script1": "echo npm script works in bash",
"script2": "echo msg1 && echo msg2"
}
And the output in bash will be:
$ npm run script1
> testnpmscript@1.0.0 script1 /testNPMScript
> echo npm script works in bash
npm script works in bash
$ npm run script2
> testnpmscript@1.0.0 script2 /testNPMScript
> echo msg1 && echo msg2
msg1
msg2
Q: What is the CI=true
doing in the package.json
's scripts?
process.env
is the the global environment setting as read by Node. You can modify or create any environment values to the process.env
by:
$ ALSET="awesome" node
> process.env.ALSET
'awesome'
So running the npm script "test": "CI=true react-scripts test --env=jsdom"
is equivalent to:
$ CI=true node ./node_modules/react-scripts/scripts/test.js --env=jsdom
And the test.js
specifies the logic for process.env.CI
:
let argv = process.argv.slice(2);
// Watch unless on CI or in coverage mode
if (!process.env.CI && argv.indexOf('--coverage') < 0) {
argv.push('--watch');
}
Q: How does the npm start
automatically open my browser with a port 3000?
As specified in the package.json
's scripts: "start": "react-scripts start"
, the shell will look for \node_modules\react-scripts\scripts
directory's start.js
and run with #!/usr/bin/env node
:
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; // here sets the port
const HOST = process.env.HOST || '0.0.0.0';
...
const devServer = new WebpackDevServer(compiler, serverConfig);
// Launch WebpackDevServer.
devServer.listen(port, HOST, err => {
...
openBrowser(urls.localUrlForBrowser); // here opens the browser
});
Q: Where are the webpack configs for the app?
Since we choose not to eject
this creat-react-app, we rely on the react-scripts
to take care of the webpack configurations in /node_modules/react-scripts/config
:
/node_modules/react-scripts/config/
├── env.js
├── jest
│ ├── babelTransform.js
│ ├── cssTransform.js
│ └── fileTransform.js
├── paths.js
├── polyfills.js
├── webpack.config.dev.js
├── webpack.config.prod.js
└── webpackDevServer.config.js