NOWA1 应用升级 NOWA2
可以使用最新的工程化构建方案
- Babel 7
- 优化过的 uglify 配置
安装 nowa2 命令:npm i @nowa/cli @nowa/core -g
将 solution 加入到项目 package.json 的项目 devPendencies 依赖中:@nowa/solution-react
或者 @nowa/solution-react-typescript
重新安装项目依赖:npm install
,安装完成后 nowa2 的命令就可用了:nowa2 start
, nowa2 server
升级步骤
由于 webpack 2 以上需要使用标准的 ECMAScript 6 Module
语法,导致 和 import
并不能混合使用。因此针对于之前项目里的导入导出,需要做调整。
1.1 CommonJS 风格的导入导出修改
首先确保迁移的代码库有版本控制 (方便diff和撤销更改)
然后使用 cjs-to-es6
进行 require => import
和 module.exports => export default
的转换。
转换之后应该会解决95%以上的导出问题。
在实际操作过程中我们发现会有一些非标准情形不会被自动转换。转换完成之后require()
会残留,请全局搜索require
之后手动进行修改。
1.2 非标准 ESM 导入导出修改
此部分可以通过 webpack 打包抛出的 warning 来看。简而言之,默认导出只能通过默认导入使用,两者不能混用。
1.3 入口改造
最简单的修改方式为新建 src/index.jsx
并编写内容为
项目模板入口地址为html/index.html
=== 需变更为 ===> src/index.html
1.4 模板改造
之前的 index.html
会有类似于<script src="/app.js"></script>
的代码。将打包输出的 js 主动引入项目中。
由于新的 solution 中集成了 html-webpack-plugin,会将产物自动的写入模板,此类代码需要移除以避免多次执行。
1.5 注入变量改造
nowa1 创建的一些模板中使用 LOCAL
变量区分 nowa server
以及 。目前这种写法已不提供支持,请使用以下方式替代:
注意此处的区分只和构建模式相关,不与任何环境相关联。
1.6 HTML 容器改造
SPA 模式下任何项目的打包产物均为 index.js,在前端代码升级之后,后端 HTML 的引入的 js 路径会变化,请根据实际需要进行修改。