先全局安装 kbone
$ npm install -g kbone-cli
创建 kbone 项目,并选择 react
$ kbone init learn_kbone
目前直接运行 npm run web 是可以将项目跑起来的,但是目前项目的页面都直接放在了 /src 目录下面,我想把项目的页面文件改到 /src/pages 里面,那么需要对下面的一些页面进行改造:
1、在 /src 文件夹下新建 pages 文件夹,将 /src 文件夹下面的 index.js 和 log.js 等页面 js 文件移入 /src/pages 文件夹里面。
2、打包的入口文件 config/entry.js 改动
// 改动前
walk('./src');
// 改动后
walk('./src/pages')
3、config/paths.js 文件改动
// 改动前
mobule.exports = {
...
appIndexJs: resolveApp('src/index.js')
...
}
// 改动后
mobule.exports = {
...
appIndexJs: resolveApp('src/pages/index.js')
...
}
4、webpack.config.dev.js 和 webpack.config.prod.js(web端打包配置文件改动)
// 改动前
fileList.forEach(function (item) {
entry[item] = [
require.resolve('./polyfills'),
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appSrc + '/' + item + '.js',
];
...
}
// 改动后
fileList.forEach(function (item) {
entry[item] = [
require.resolve('./polyfills'),
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appSrc + '/pages/' + item + '.js',
];
...
}
5、webpack.mp.config.js 小程序打包配置文件
// 改动前
module.exports = {
mode: 'production',
entry: {
index: path.resolve(__dirname, '../src/index.js'),
...
}
...
}
// 改动后
module.exports = {
mode: 'production',
entry: {
index: path.resolve(__dirname, '../src/pages/index.js'),
...
}
...
}