# @umu-team/preprocess-loader

> umu 条件编译

Latest version **0.1.2** (published 2018-07-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @umu-team/preprocess-loader
pnpm add @umu-team/preprocess-loader
yarn add @umu-team/preprocess-loader
bun add @umu-team/preprocess-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2018-07-26 |
| First published | 2018-04-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 5.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | wayou |
| Maintainers | librajt, umu-duanjun, wayou |
| Keywords | wbpack, webpack-laoder, preprocess |

## Links

- npm: https://www.npmjs.com/package/@umu-team/preprocess-loader
- Repository: https://github.com/umu-team/preprocess-loader
- Issues: https://github.com/umu-team/preprocess-loader/issues
- npm.io page: https://npm.io/package/@umu-team/preprocess-loader

## Dependencies (2)

- [preprocess](https://npm.io/package/preprocess.md) ^3.1.0
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.1.2 (latest) — 2018-07-26
- 0.1.1 — 2018-04-23
- 0.1.0 — 2018-04-02

## README

## @umu-team/preprocess-loader

条件编译

[![npm package](https://img.shields.io/npm/v/@umu-team/preprocess-loader.svg)](https://www.npmjs.com/package/@umu-team/preprocess-loader)
[![npm package](https://img.shields.io/npm/dm/@umu-team/preprocess-loader.svg)](https://www.npmjs.com/package/@umu-team/preprocess-loader)


### Install

```
npm i -D @umu-team/preprocess-loader
```

### Usage

webpack 中的配置：

_webpack.config.js_
```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          'ts-loader',
          {
            loader: '@umu-team/preprocess-loader',
            options: {
              context: {
                IS_PRODUCTION: true
                ...
              },
            },
          },
        ],
      },
    ];
  }
}
```


假设页面代码中可使用的编译参数为：

- `SYSTEM` 当前系统
- `LOCALE` 当前语言
- `DEBUG` 是否调试模式，可进行测试代码相关的控制 
- `IS_PRODUCTION` 区分线上与线下环境

示例：

```js
// @if LOCALE = 'JP'
console.log('当前语言：日语')
//@endif

// @if LOCALE != 'JP'
console.log('当前语言：非日语')
//@endif

// @if IS_PRODUCTION
console.log('线上环境')
//@endif

// @if !IS_PRODUCTION
console.log('线下环境')
//@endif
```

具体使用详见 [preprocess](https://www.npmjs.com/package/preprocess)


### 已知问题


与 Sass 配合使用时，因为 sass 文件中通过 `@import` 导入的文件是 sass 自己处理的，而非 webpack。
即 webpack 不能分析 sass 文件中的引用关系，所以 webpack 的 loader 只作用于 js 中直接引用进来的 sass 文件，
而这个 sass 文件中如果还 `@import` 了其他 sass 文件，后续这些文件不会被 load 处理。

示例：

index.jsx
```js
import './index.scss'
```

index.scss
```css
@import './other.scss'
body{
  color:red;
}
```

other.scss
```css
/* @if IS_PRODUCTION */
body{
  color: blue;
}
/* @endif */
```

`other.scss` 中的条件编译不会生效，因为它是在 sass 文件中通过 `@import` 句法导入到项目中的，没有被 webpack 分析到。

所以，为了解决上述问题，其他 loader 应该在 `sass-loader` 之后调用。

示例：

```js
{
  test: /\.scss$/,
  use: [
      {
        loader: "css-loader",
        options: {
          importLoaders: 2
        }
      },
      {
        loader: "@umu-team/preprocess-loader", // 此时拿到的是处理过 `@import` 完整的 sass 文件
        options: {
          context: {
            IS_PRODUCTION: env.IS_PRODUCTION
          }
        }
      },
      "sass-loader" // sass-loader 先处理 sass 文件，将导入合成一个文件传递给下游其他 loader
    ]
}
```

同时，sass 文件中注释需使用多行注释的方式 `/* */` 而不是 `//` 开头的单行注释。

---
_Source: https://npm.io/package/@umu-team/preprocess-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._