脚手架与工程配置

简单的命令操作，深度定制的工程配置。bnorth 脚手架实现了从工程创建到工程模板选择，从代码编译到代码优化与混淆，从调试服务器到数据模拟和数据代理，从代码转换到代码静态检查，从 html 生成配置到各项精细配置。

脚手架

创建工程

npx @bnorth/cli create demo

工程模板

编译命令 server config

创建好的工程，已经配置了默认的 start 和 build 命令，实现调试和编译功能

• npm start ：该命令首先启动调试服务器和默认浏览器，然后编译代码和启动代码监视

  • HTTPS ：
  • HOST ：
  • PORT ：

• npm run build ：编译

  • npm run build – –debug ：开启调试模式，代码不压缩混淆
  • npm run build – –analyze ：开启代码分析模式，生成生成文件尺寸分析也慢

创建页面

TODO

工程配置

package.json bnorth bnorht_production bnorth_developer

打包配置

bail: false, devtool: false, resolveExtensions: [‘.js’, ‘.json’, ‘.jsx’], resolveExtensionsExtra: [], externals: undefined, define: {}, extractCss: false, urlLoaderLimit: 0,

输出配置

outputPath: ‘./dist’, outputFilename: ‘[name].[hash:8].js’, outputPublicPath: ‘./’, outputChunkFilename: ‘[name].[chunkhash:8].async.js’, filename: src 覆盖 hbs index.hbs public

html 模板

bnorth 为生成 html，提供了模板和模板参数，如果想替换默认的模板，可以在 src 目录下，新建 index.hbs 文件，替换默认模板。

package json 和 bnorth config 提供了一些参数，用来替换模板中的变量。

1. 设置 title，即浏览器标题：

   displayNameWeb displayName name,

2. 设置 icon，即浏览器图标

   iconWeb icon,

3. 设置注入到页面上的 js 变量

   webParams: { }

4. htmlTemplateParams:{}, metaNames: metaNamesExt, metaHttpEquiv metaHttpEquivExt jsFiles cssFiles heads rootBefore rootAttr rootAttrExt rootChildren rootChildrenExt rootAfter

注入： env, version: appPackage.version, webParams,

proxy

bnorth.proxy https://webpack.js.org/configuration/dev-server/#devserver-proxy

mock

bnorth.mockerFile bnorth.mackerConfig

https://github.com/jaywcjlove/mocker-api

babel 配置

eslint 配置