Migration
The @leanup stack
is maximally decoupled, so we can proceed quickly and with only tiny changes.
Migrate from 1.0 to 1.1
Changes
- ✨ Refactoring the @leanup module separation
- ✨ Maximal Major-Upgrade from all dependencies
- ✨ Remove some not really important dependencies (e.g.
copy-webpack-plugin
,html-webpack-plugin
) - ✨ Global CLI installation
- ✨ Webpack 5
- ✨ ESBuild
- ✨ Much faster stack installation
- ✨ Much faster script execution (ESBuild)
- ⚽ Vite 2 (experimental)
- ⚽ Snowpack 3 (experimental)
- ✋ Builds does only contains the SourceCode-Artifacts (no frame material, like public-folder and their assets)
- ✋ The bundled artifact name (
app.js
) was change tomain.js
. - ✋ The separate css artifact file (
app.css
) is now included inside themain.js
. - ✋ The script tag in the
index.html
must now be inserted yourself. - ⛔ We can not longer be supported Aurelia as long as the ticket #39 is not resolved.
Migrate
Follow the steps below to update the stack.
Fetch changes
> git checkout -b chore/update-leanup-stack-to-v1.1
> npm i -D @leanup/cli@^1.1 @leanup/cli-<framework>@^1.1
> npx <framework> create --only-config --overwrite --no-install
1
2
3
2
3
Available for 10 Frameworks: angular
, angularjs
, *, aurelia
inferno
, lit-element
, preact
, react
, svelte
, vanilla
, vue
and vue3
* Aurelia is not Webpack v5 compatible.
Clearing changes
After the changes have been fetched, the changed files must be reviewed. Some changes can then be corrected again.
Install dependencies
Now execute npm install
.
Edit you index.html
Add the following script tag in you index.html
body.
...
<script nomodule src="main.js"></script>
<script type="module" src="main.js"></script>
<body>
</html>
1
2
3
4
5
2
3
4
5
If you have unsafe-eval with @babel/runtime
If you have CSP problems with unsafe-eval
by using @babel/runtime. You can configure this as follows:
- Extends the
webpack.config.js
like this
module.exports = (...args) => {
// Here using the example for react
const config = require('@leanup/stack-react/webpack.config')(...args);
config.module.rules.unshift({
test: /runtime.js$/,
loader: 'string-replace-loader',
options: {
search: /[^\w]Function\(/,
replace: '// Function(',
},
});
return config;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
If you need the frame material
If you need the frame material from the public folder in your dist folder. You can configure this as follows:
- Install
npm i -D copy-webpack-plugin
- Extends the
webpack.config.js
like this
module.exports = (...args) => {
// Here using the example for react
const config = require('@leanup/stack-react/webpack.config')(...args);
const CopyPlugin = require('copy-webpack-plugin');
if (args[0].WEBPACK_BUILD) {
config.plugins.push(
new CopyPlugin({
patterns: [
{
from: 'public',
},
],
})
);
}
return config;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19