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