E
@Curiosity If you want to use OnsenUI with npm, you need to use a bundler such as webpack or rollup.
I’d recommend webpack as it has good documentation and is pretty easy to get working with Cordova.
Have a look at the webpack guide here https://webpack.js.org/guides/ to learn the basics.
Ok, now here’s one way of using webpack to load OnsenUI in a Cordova app.
First install the packages you’ll need:
npm install onsenui webpack webpack-cli css-loader file-loader style-loader html-webpack-plugin --save-dev
Then rename the www directory to src. Then make a new empty directory called www. Instead of using www as a source directory like you would when not using weback, we’ll use src as the source directory and www as the build output directory of webpack.
Now make webpack.config.js and put this in it:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, 'www'),
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
inject: 'head'
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
]
}
};
With this webpack config file, when you run webpack, src/index.html will be copied to www/index.html and src/index.js will be injected into it.
Put this in src/index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- the bundled javascript will get automatically injected in here by webpack -->
</head>
<body>
<ons-page>
<!-- whatever onsen stuff you want in here -->
</ons-page>
</body>
</html>
Put this in src/js/index.js:
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';
import 'onsenui';
That should be all the setup done. Now run npx webpack and webpack will bundle your application into www. If you then run cordova run you should see your application with Onsen working properly.
I think that’s all the steps, but there’s quite a lot of config here so I might have missed something. Let us know if you are having trouble.
