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 => importmodule.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 路径会变化,请根据实际需要进行修改。

    2. 老 webpack.config.js 配置改造