Skip to main content

工程配置

icejs 基于 build-scripts，因此工程使用方式与 build-scripts 完全一致。

开发调试​

默认情况下，项目的 package.json 会配置以下命令：

{
  "scripts": {
    "start": "icejs start",
    "build": "icejs build"
  }
}

执行 npm start 即可进行项目开发，正常情况下执行命令后自动打开浏览器 http://localhost:3333 进行页面预览，修改源码后浏览器会自动刷新页面。执行 npm run build 进行项目构建，构建产物默认输出到 ./build 目录下。

命令行介绍​

icejs 提供了 start/build 两个核心命令供开发者使用。

在使用 npm run start 命令时，如需传入参数请按照这个格式 npm run start -- --https

start​

$ icejs start --help

Usage: icejs start [options]

Options:
  --port <port>          服务端口号
  --host <host>          服务主机名
  --config <config>      指定配置文件
  --https                支持开启 https
  --analyzer             支持开启构建分析
  --analyzer-port <port> 支持定制构建分析端口
  --disable-reload       禁用热更新模块
  --disable-mock         禁用 mock 服务
  --disable-open         禁止浏览器默认打开行为
  --disable-assets       禁止 Webpack assets 的输出
  --force                移除构建缓存

build​

$ icejs build --help

Usage: icejs build [options]

Options:
  --analyzer             同 start
  --analyzer-port <port> 同 start
  --config <config>      同 start
  --force                同 start

工程构建配置​

工程构建相关的配置默认都收敛在项目根目录的 build.json  文件中，配置方式：

{
  "alias": {},
  "publicPath": ""
}

如果希望使用 JS 类型的配置文件，则需要在 npm scripts 中指定配置文件：

{
  "scripts": {
    "start": "icejs start --config build.config.js",
    "build": "icejs build --config build.config.js"
  }
}

build.config.js 中通过 JS 模块的方式指定配置：

module.exports = {
  define: {
    env: process.env.NODE_ENV,
  },
  plugins: [
    [
      'build-plugin-fusion',
      {
        themePackage: '@icedesign/theme',
      },
    ],
    (api) => {
      api.onGetWebpackConfig((config) => {
        config.entry('src/index.js');
      });
    },
  ],
};

当下支持的基础配置项请参考文档：配置。

进阶配置​

根据环境区分工程配置​

参考 区分不同环境。

如何开启新的 JSX 转换​

ice.js 1.16.0+ 支持 New JSX Transform，开启该能力之后，编写 React 组件时不再需要在头部引入 React。

只需要修改 tsconfig.json 中的 compilerOptions.jsx 即可：

{
  "compilerOptions": {
-    "jsx": "react",
+    "jsx": "react-jsx",
  }
}

接下来书写组件就不再需要引入 React 了：

- import React from 'react';

function Example() {
  return <>Hello</>;
}

自定义工程配置​

如果基础配置和已有插件都无法支持业务需求，可以通过自定义配置来实现，自定义配置同时也是一个 Webpack 插件。

首先新建 build.plugin.js  文件作为一个自定义插件，然后写入以下代码：

module.exports = ({ context, onGetWebpackConfig }) => {
  onGetWebpackConfig((config) => {});
};

插件内部代码写法可以参考文档 通过插件定制工程能力。

最后在 build.json  里引入自定义插件即可：

{
  "plugins": ["build-plugin-ice-app", "./build.plugin.js"]
}

调试​

在某些情况下可能遇到配置没有生效，或者配置不符合预期，这时候我们可以通过下面的命令进行调试，查看最终的 Webpack 配置是否符合预期。

# 调试开发环境
$ DEBUG=icejs npm start

# 调试构建环境
$ DEBUG=icejs npm run build

# 调试构建环境
$ DEBUG=icejs npm run test