From 131bc6d8d50d89626df2cfd721afa22436636e13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=B1=E5=A4=A9=E5=88=A9?= <372736560@qq.com>
Date: Wed, 21 Sep 2022 17:04:07 +0800
Subject: [PATCH 1/2] feat: add mocha webpack demo
---
.gitignore | 5 ++++-
README.md | 17 +++++++++++++++-
babel.config.js | 16 +++++++++++++++
index.html | 4 ++++
package.json | 51 ++++++++++++++++++++++++++++++++---------------
src/app.js | 3 +++
src/index.js | 8 ++++++++
test/app.spec.js | 15 ++++++++++++++
webpack.config.js | 29 +++++++++++++++++++++++++++
9 files changed, 130 insertions(+), 18 deletions(-)
create mode 100644 babel.config.js
create mode 100644 index.html
create mode 100644 src/app.js
create mode 100644 src/index.js
create mode 100644 test/app.spec.js
create mode 100644 webpack.config.js
diff --git a/.gitignore b/.gitignore
index 4d29575..1315f75 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,7 +10,7 @@
# production
/build
-
+/lib
# misc
.DS_Store
.env.local
@@ -21,3 +21,6 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
+
+# test
+mochawesome-report
diff --git a/README.md b/README.md
index 8ec5172..2c98313 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,16 @@
-# Gitee Go Nodejs 使用示例
+# React, webpack
+
+Full documentation about it [here](https://mochajs.org/#-require-module-r-module)
+
+## Commands
+
+- `npm run build` - run webpack using the local `webpack.config.js` file. Builds the client-side code into `/lib`.
+- `npm start` - builds the code and opens `index.html` inside the browser.
+- `npm test` - run the tests using the local `.mocharc.js` config file. As the config includes the Babel transpilation hook `@babel/register` it does not require pre-compilation before running.
+
+## Makes use of
+
+- [babel](https://babeljs.io/) - transpilation
+- [enzyme](https://airbnb.io/enzyme/) - React component testing library
+- [chai](https://www.chaijs.com/api/assert/) - assertion library
+- [jsx](https://reactjs.org/docs/introducing-jsx.html) - syntax extension to JavaScript
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..f4bcef9
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,16 @@
+module.exports = (api) => {
+ // Cache configuration is a required option
+ api.cache(false);
+
+ const presets = [
+ [
+ "@babel/preset-env",
+ {
+ useBuiltIns: false
+ }
+ ],
+ "@babel/preset-react"
+ ];
+
+ return { presets };
+};
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..be2d109
--- /dev/null
+++ b/index.html
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/package.json b/package.json
index d4ac28e..af28bc9 100644
--- a/package.json
+++ b/package.json
@@ -1,25 +1,44 @@
{
- "name": "expressjs-hello",
+ "name": "example-react-webpack-app",
"version": "1.0.0",
- "description": "",
- "main": "app.js",
+ "description": "React Webpack example",
+ "main": "src/index.js",
+ "browser": "lib/index_bundle.js",
"scripts": {
- "start": "node app.js",
- "test": "mocha --reporter mochawesome"
+ "build": "webpack",
+ "start": "npm run build && opn index.html",
+ "test": "mocha --require @babel/register --reporter mochawesome --exit"
},
- "repository": {
- "type": "git",
- "url": "git@code.aliyun.com:flow-example/node-expressjs.git"
+ "directories": {
+ "lib": "./lib",
+ "src": "./src",
+ "test": "./test"
},
- "author": "",
- "license": "ISC",
"dependencies": {
- "express": "^4.17.1",
- "node-sass": "^4.14.1"
+ "express": "^4.18.1",
+ "opn-cli": "^5.0.0",
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2"
},
"devDependencies": {
- "mocha": "^6.2.2",
- "mochawesome": "^4.1.0",
- "supertest": "^4.0.2"
- }
+ "@babel/cli": "^7.2.3",
+ "@babel/core": "^7.3.4",
+ "@babel/preset-env": "^7.3.4",
+ "@babel/preset-react": "^7.0.0",
+ "@babel/register": "^7.18.9",
+ "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
+ "babel-loader": "^8.0.5",
+ "chai": "^4.2.0",
+ "cheerio": "1.0.0-rc.3",
+ "enzyme": "^3.9.0",
+ "mocha": "latest",
+ "mochawesome": "^7.1.3",
+ "supertest": "^6.2.4",
+ "webpack": "^5.35.1",
+ "webpack-cli": "^4.6.0"
+ },
+ "engines": {
+ "node": ">=10.0.0"
+ },
+ "license": "ISC"
}
diff --git a/src/app.js b/src/app.js
new file mode 100644
index 0000000..5c5b827
--- /dev/null
+++ b/src/app.js
@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default () => (Welcome to the React application.
);
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..aa1e0ec
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './app';
+
+ReactDOM.render(
+ ,
+ document.getElementById('root')
+);
diff --git a/test/app.spec.js b/test/app.spec.js
new file mode 100644
index 0000000..0859405
--- /dev/null
+++ b/test/app.spec.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { expect } from 'chai';
+import { shallow } from 'enzyme';
+import Enzyme from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import App from '../src/app.js';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('', () => {
+ it('renders our app with welcome text', () => {
+ const wrapper = shallow();
+ expect(wrapper.text()).to.equal("Welcome to the React application.")
+ });
+});
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..d8597a6
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,29 @@
+const path = require('path');
+
+/**
+Below we configure webpack to build a client-side bundle with the following instruction:
+ - use the "babel-loader" module for preprocessing of ES6
+ - in "development" mode so webpack will not use any built-in optimisations
+ - start processing code from file "./src/index.js"
+ - output bundle to "lib/index_bundle.js"
+*/
+
+module.exports = {
+ entry: './src/index.js',
+ output: {
+ path: path.resolve('lib'),
+ filename: 'index_bundle.js'
+ },
+ mode: 'development',
+ module: {
+ rules: [
+ {
+ test: /\.m?js$/,
+ exclude: /(node_modules)/,
+ use: {
+ loader: 'babel-loader',
+ }
+ }
+ ]
+ }
+}
--
Gitee
From 0f60cb3841a59a4af0fb13fa7d3f475576ed5ab1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=B1=E5=A4=A9=E5=88=A9?= <372736560@qq.com>
Date: Wed, 21 Sep 2022 17:11:14 +0800
Subject: [PATCH 2/2] refactor(mocha-webpack-demo): output path to dist
---
.gitignore | 2 +-
webpack.config.js | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/.gitignore b/.gitignore
index 1315f75..51b5c12 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,7 +10,7 @@
# production
/build
-/lib
+/dist
# misc
.DS_Store
.env.local
diff --git a/webpack.config.js b/webpack.config.js
index d8597a6..af1bdc8 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -11,7 +11,7 @@ Below we configure webpack to build a client-side bundle with the following inst
module.exports = {
entry: './src/index.js',
output: {
- path: path.resolve('lib'),
+ path: path.resolve('dist'),
filename: 'index_bundle.js'
},
mode: 'development',
--
Gitee