https://github.com/course-one/js-plugin-starter-kit

VanillaJS (pure JavaScript) plugin starter with Webpack 4 and Babel 7.
https://github.com/course-one/js-plugin-starter-kit

boilerplate js-plugin plugin-dev typescript vanilla-javascript vanilla-js webpack

Last synced: 3 months ago
JSON representation

VanillaJS (pure JavaScript) plugin starter with Webpack 4 and Babel 7.

• Host: GitHub
• URL: https://github.com/course-one/js-plugin-starter-kit
• Owner: course-one
• License: mit
• Created: 2018-05-17T16:35:12.000Z (over 6 years ago)
• Default Branch: webpack-4-babel-7
• Last Pushed: 2023-01-04T21:37:42.000Z (about 2 years ago)
• Last Synced: 2023-03-08T17:51:23.501Z (almost 2 years ago)
• Topics: boilerplate, js-plugin, plugin-dev, typescript, vanilla-javascript, vanilla-js, webpack
• Language: JavaScript
• Homepage: https://medium.com/@thatisuday/how-to-write-a-frontend-javascript-plugin-using-es6-sass-webpack-a1c6d6fdeb71
• Size: 2.44 MB
• Stars: 100
• Watchers: 5
• Forks: 27
• Open Issues: 28
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# js-plugin-starter-kit

VanillaJS (_pure JavaScript_) plugin starter with **Webpack 4** and **Babel 7**.

# Clone this repository

```

git clone -b webpack-4-babel-7 https://github.com/thatisuday/js-plugin-starter.git [dest]

```

> Here, `dest` is your destination directory in which the boilerplate code will be copied.

# Instructions

- Use `npm install` command to install dependencies.

- Execute command `npm run start` to run webpack development server and top open preview in the browser.

- Execute command `npm run build` to create plugin distribution files in the `dist` directory.

- Tweak configuration inside `config` folder if necessary.

- Configure plugin API using [**this**](https://webpack.js.org/configuration/output/) documentation.

# React.js plugin development

- Install **React preset** using `npm i -D @babel/preset-react` command.

- Update `babel.config.js` file with this new preset. Follow [**these**](https://babeljs.io/docs/en/babel-preset-react) instructions.

- Update `/\.js$/` with `/\.jsx?$/` inside `webpack.config.js` to compile JavaScript files with `.jsx` extensions.

- Install React and ReactDOM using `npm i -S react react-dom` command.