Malina.js 项目教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00048/article/details/137451694

Malina.js 项目教程

malinajs Frontend compiler, inspired by Svelte 项目地址: https://gitcode.com/gh_mirrors/ma/malinajs

1. 项目的目录结构及介绍

Malina.js 项目的目录结构如下：

malinajs/
├── plugins/
├── src/
├── test/
├── .eslintrc
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── malina-esbuild.js
├── malina-rollup.js
├── malinajs2.png
├── package-lock.json
├── package.json
├── readme.md
└── rollup.config.js

目录结构介绍：

plugins/: 存放项目的插件文件。
src/: 存放项目的源代码文件。
test/: 存放项目的测试文件。
.eslintrc: ESLint 配置文件，用于代码风格检查。
.gitignore: Git 忽略文件配置，指定哪些文件或目录不需要被 Git 管理。
CHANGELOG.md: 项目更新日志文件。
LICENSE: 项目许可证文件。
malina-esbuild.js: 使用 ESBuild 的配置文件。
malina-rollup.js: 使用 Rollup 的配置文件。
malinajs2.png: 项目图标文件。
package-lock.json: 锁定项目依赖版本的文件。
package.json: 项目的 npm 配置文件，包含项目的依赖、脚本等信息。
readme.md: 项目的 README 文件，通常包含项目的介绍、安装和使用说明。
rollup.config.js: Rollup 的配置文件，用于打包项目。

2. 项目的启动文件介绍

Malina.js 项目的启动文件主要是 package.json 中的 scripts 部分。以下是一些常用的启动命令：

{
  "scripts": {
    "dev": "npm run build && node server.js",
    "build": "rollup -c rollup.config.js",
    "start": "node server.js"
  }
}

启动命令介绍：

npm run dev: 开发模式启动命令，首先执行 build 命令进行打包，然后启动服务器。
npm run build: 打包命令，使用 Rollup 进行打包。
npm start: 生产环境启动命令，直接启动服务器。

3. 项目的配置文件介绍

3.1 `rollup.config.js`

rollup.config.js 是 Rollup 的配置文件，用于配置项目的打包方式。以下是一个简单的配置示例：

import malina from 'malinajs';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    malina()
  ]
};

配置文件介绍：

input: 指定入口文件，通常是 src/main.js。
output: 指定输出文件的配置，包括输出文件路径和格式。
plugins: 使用 malina 插件进行打包。

3.2 `package.json`

package.json 是项目的 npm 配置文件，包含项目的依赖、脚本等信息。以下是一些关键配置：

{
  "name": "malinajs",
  "version": "1.0.0",
  "scripts": {
    "dev": "npm run build && node server.js",
    "build": "rollup -c rollup.config.js",
    "start": "node server.js"
  },
  "dependencies": {
    "malinajs": "^1.0.0"
  },
  "devDependencies": {
    "rollup": "^2.0.0"
  }
}