initial commit. Created a basic webpack.config.js file, some basic .babelrc settings, and some notes on the build
This commit is contained in:
parent
9e6b2b9d6e
commit
811e3eebe0
7 changed files with 2627 additions and 0 deletions
4
.babelrc
Normal file
4
.babelrc
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"presets": ["env"],
|
||||||
|
"plugins": ["transform-react-jsx"]
|
||||||
|
}
|
||||||
4
.gitignore
vendored
4
.gitignore
vendored
|
|
@ -0,0 +1,4 @@
|
||||||
|
*~
|
||||||
|
*.retry
|
||||||
|
node_modules/
|
||||||
|
build/
|
||||||
54
docs/build-notes.md
Normal file
54
docs/build-notes.md
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
# Building the plugin
|
||||||
|
|
||||||
|
These are some basic notes on building the plugin
|
||||||
|
|
||||||
|
## yarn
|
||||||
|
|
||||||
|
The subscription-manager plugin for cockpit is built using webpack 2.x. Although npm can be used to install the various
|
||||||
|
dependencies, it is recommended to install [yarn][-yarnpkg] and use it instead:
|
||||||
|
|
||||||
|
```
|
||||||
|
yarn install
|
||||||
|
```
|
||||||
|
|
||||||
|
After this command finishes, all the node_modules will be installed.
|
||||||
|
|
||||||
|
## babel
|
||||||
|
|
||||||
|
The .babelrc file contains the settings for the various things babel can do, namely transform es6 to es5 code, and to
|
||||||
|
transform react jsx code to regular javascript. When building, the webpack.config.js setting will output a bundled file
|
||||||
|
in ./build/bundle.js. It will run the babel-loader plugin to transform es6 to es5
|
||||||
|
|
||||||
|
**TODO**: Figure out how to configure babelrc to transform jsx code
|
||||||
|
|
||||||
|
## index.js
|
||||||
|
|
||||||
|
This is the entry point for webpack, and will most likely contain the main parent react component.
|
||||||
|
|
||||||
|
|
||||||
|
## Directory layout
|
||||||
|
|
||||||
|
**TODO**: describe the high level layout of the folders, eg. component folder is for react components.
|
||||||
|
|
||||||
|
# Making a build
|
||||||
|
|
||||||
|
To actually build the plugin, simply run:
|
||||||
|
|
||||||
|
```
|
||||||
|
yarn run build
|
||||||
|
```
|
||||||
|
|
||||||
|
or alternatively if you didn't install yarn:
|
||||||
|
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
This works because the package.json file has a scripts object, and the build key tells us to run the webpack command
|
||||||
|
with the build option.
|
||||||
|
|
||||||
|
Why do it this way instead of just doing `npm install -g webpack` and then `webpack build`? By doing that, different
|
||||||
|
users trying to build the plugin might have different versions of webpack installed. By installing webpack as a dev
|
||||||
|
dependency, and then using yarn or npm to run a command, it will use the webpack version installed locally.
|
||||||
|
|
||||||
|
[-yarnpkg]: https://yarnpkg.com
|
||||||
23
package.json
Normal file
23
package.json
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
{
|
||||||
|
"name": "subscription-manager",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"description": "a plugin for cockpit to manage subscriptions",
|
||||||
|
"main": "index.js",
|
||||||
|
"repository": "git@github.com:rarebreed/subscription-manager.git",
|
||||||
|
"author": "",
|
||||||
|
"license": "LGPL-2.1",
|
||||||
|
"scripts": {
|
||||||
|
"build": "webpack"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"babel-core": "^6.25.0",
|
||||||
|
"babel-loader": "^7.0.0",
|
||||||
|
"babel-plugin-transform-react-jsx": "^6.24.1",
|
||||||
|
"babel-preset-env": "^1.5.2",
|
||||||
|
"webpack": "^2.6.1"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^15.6.0",
|
||||||
|
"react-dom": "^15.6.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
0
src/index.js
Normal file
0
src/index.js
Normal file
18
webpack.config.js
Normal file
18
webpack.config.js
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
const path = require("path");
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: ["./src/index.js"],
|
||||||
|
output: {
|
||||||
|
filename: "bundle.js",
|
||||||
|
path: path.resolve(__dirname, "build")
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
exclude: /node_modules/,
|
||||||
|
loader: 'babel-loader',
|
||||||
|
test: /\.js$/
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue