open-index/open-npm huggingface dataset:
npm package: @mixtint/trix-ext
Description: Ext in Trix editor
Author: Eric-Guo
Latest version: 1.1.0


# Columns
Adds the ability to insert columns of text or images in the trix editor.
![trix-columns](https://dotcode.moscow/scrin/1.png)

# Video
Adds the ability to insert videos from YouTube/bilibili to the trix editor.
![trix-video](https://dotcode.moscow/scrin/2.png)

# Install
`npm i @mixtint/trix-ext`

# Laravel example 
Add on resources/js/app.js
```javascript
require('@mixtint/trix-ext');
require('@mixtint/trix-ext/dist/custom-trix.css');
```
npm package: @mixup/cli
Description: mix cli.
Latest version: 1.7.2

# mix

> [mix](https://github.com/ittiam/mix) 命令行工具


## Installation

```shell
npm i @mixup/cli -g
```

## Usages

```shell
# create vue project
mix create vue-project vue

# development mode
mix watch

# production mode
mix build

# import plugin
mix import @mixup/mix-plugin-vue
```
npm package: @mixup/create
Description: Create MIX app
Latest version: 1.1.5-alpha.0

# @mixup/create

MIX 项目模板生成工具。

## 命令

**npx（推荐）**

```sh
npx @mixup/create my-app
```

_需要 npm 5.2+ 版本_

**npm**

```sh
npm init @mixup my-app
```

_需要 npm 6+ 版本_

**yarn**

```sh
yarn create @mixup my-app
```

_需要 yarn 0.25+ 版本_

**MIX CLI**

```sh
npm i @mixup/cli -g

mix create my-app
```

### 参数

- `--use-npm` 使用 `npm` 安装依赖，默认 `yarn`
- `--use-pnp` 使用 yarn pnp 模式
- `--no-ts` 不使用 typescript
- `--preset | -p` 指定预设模板，vue | react | other lib
- `--force | -f` 强制在指定目录生成项目

## 流程

- 创建或检查应用目录
- 生成预置 package.json，添加依赖字段
- 安装 @mixup/x 及 App 框架依赖
- 从 @mixup/x 中提取项目模板
- 更新 package.json 余项字段
- 生成项目 src 目录及配置文件
- (如果不存在)初始化 git 仓库
npm package: @mixup/mix
Description: A modular build tool based on webpack.
Latest version: 1.7.2

# mix

> 更易上手的前端构建工具，基于 webpack


## Installation
```shell
npm i @mixup/mix -D
```

## Usage

mix.conf.js

```javascript
var mix = require('@mixup/mix')

mix.set({
  entry: './src/index.js',
  dist: './dist',
  template: './index.tpl',
  hash: true,
  extractCSS: true,
  devServer: { port: 8080 }
})

module.exports = mix.resolve()
```

```shell
# development
node_modules/.bin/mix watch

# production
node_modules/.bin/mix build -p

# or use webpack
NODE_ENV=production webpack --config mix.conf.js
```
npm package: @mixup/mixup
Description: A modular build tool based on webpack.
Author: chonger42
Latest version: 2.3.14

## Quick Start

```bash
npm install -g create-mixup-app

create-mixup-app my-app
cd my-app
npm start
```

Then open http://localhost:3000/ to see your app.


**That's it**. You don't need to worry about setting up multiple webpack configs or other build tools. Just start editing `src/App.js` and go!

Below is a list of commands you will probably find useful.

### `npm start` or `yarn start`

Runs the project in development mode.
You can view your application at `http://localhost:3000`

The page will reload if you make edits.

### `npm run build` or `yarn build`

Builds the app for production to the build folder.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

### `npm test` or `yarn test`

Runs the test watcher (Jest) in an interactive mode.
By default, runs tests related to files changed since the last commit.

---

MIT License
npm package: @mixup/x
Description: 支持 React / Vue + Ts 的多页应用打包工具
Latest version: 1.0.5-alpha.0

# MIX

支持 React / Vue + Ts 的多页应用打包工具。


## 安装

> 依赖 Node.js 8.10.0+

```bash
npx @mixup/create my-app
```

### 手动安装

也可以在现有项目中手动安装 @mixup/x

```bash
yarn add @mixup/x -D
```

### 配置 npm script

`package.json` 中配置 npm-script

```bash
"scripts": {
  "dev": "mix dev",
  "build": "mix build"
 },
 ...
```

## 命令

MIX 提供开箱即用的多页应用打包服务，在 mix 中**页面**又称为**视图(view)**，存放于 `src/views` 目录下。

我们约定，一个典型的**页面**应至少包含一个 `index.html` 文件和一个 `index.js` 文件。

一个项目应至少含有一个页面。

### 启动开发环境

运行开发命令在本地启动一个开发服务器，默认端口号 `3022`。

```bash
npm run dev
```

### 打包项目

打包页面，将在 `dist/<view_name>` 目录下输出构建结果

```bash
npm run build
```

#### FTP 上传

在 build 模式下可配置使用 ftp 上传功能，需在项目根目录创建 `mix.config.js` 文件，并注册 ftp 账号信息。

通过 `--ftp` 参数指定将打包结果上传 ftp。为方便多分支测试，当传递 `branch_name` 值时，将创建 branch 文件夹作路径隔离。

```bash
npm run build --ftp [branch_name]
```

### 打包 dll 文件

`mix.config.js` 中配置 `vendor` 信息

```
vendor: ['react', 'react-router']
```

运行 `dll` 命令生成公共资源包，执行结果将会输出到 `dist/vendor` 文件夹下

```bash
npm run dll

# 打包 dll 文件，并上传至文件服务器
npm run dll --ftp
```

### 打包组件

`mix` 除了支持项目打包外，也可作为组件打包工具。

在工程 `src` 文件夹中创建 `index.js` 文件作为组件入口

npm-script 中配置

```json
"build": "mix lib"
```

打包

```bash
npm run build
```

打包后文件将在 `lib` 目录中输出构建结果

此外还可指定 `--all` 参数来打包 demo

```bash
npm run build -- --all
```

## 教程

### 代码分割

#### 动态代码分割

使用动态 import 方法生成动态 chunk 包

```javascript
import('./my-module.js').then(module => {
  // Do something with the module.
})
```

这种使用方式也支持 await 关键字。

```javascript
let module = await import('/modules/my-module.js')
```

#### 静态代码分割

此功能可零配置启用，凡是在 `views/<view_name>/` 下符合命名约定 `index.<chunk_name>.js` 的文件均会被视为 `chunk` 包拆分，拆分后的 bundle 文件以 `<chunk_name>.servant.js` 命名，这里称之为 `servant` 包。

其中 `chunk_name` 为拆分入口的名称，例如 `index.foo.js` 构建后将生成 `foo.servant.js`

`<chunk_name>.servant.js` 文件将只会在生产环境(build)生成，在开发环境(dev)中，所有的 servant 将合并到 entry 中引入。对于使用者来说一切都是无感知的。

#### 打包 vendor

默认的，mix 会自动拆分 vendor 包。