# 更新系统软件包列表
sudo pacman -Syu

# 安装Node.js和npm
sudo pacman -S nodejs npm

node -v
npm -v

# 创建项目目录并进入
mkdir rollup-demo && cd rollup-demo

# 初始化npm项目
npm init -y

npm install --save-dev rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-babel @babel/core @babel/preset-env rollup-plugin-terser

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": "> 0.25%, not dead"
        },
        "modules": false,
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';

export default {
  // 入口文件路径
  input: 'src/main.js',

  // 输出配置数组(可以输出多种格式)
  output: [
    {
      file: 'dist/bundle.cjs.js',
      format: 'cjs',
      sourcemap: true,
    },
    {
      file: 'dist/bundle.esm.js',
      format: 'esm',
      sourcemap: true,
    },
    {
      file: 'dist/bundle.umd.js',
      format: 'umd',
      name: 'MyBundle', // UMD格式需要指定全局变量名
      sourcemap: true,
    }
  ],

  // Rollup插件配置
  plugins: [
    resolve(), // 解析node_modules中的第三方模块

    commonjs(), // CommonJS转ES6

    babel({ 
      babelHelpers: 'bundled', 
      exclude: 'node_modules/**' 
    }), // Babel配置

    terser() // JS代码压缩(生产环境使用)

    // ...其他插件可以在这里添加

    // process.env.NODE_ENV === 'production' && terser() 
    // (如果区分开发和生产环境可以这样写)

    // ...其他插件可以在这里添加


   ],

   // external选项用于指定哪些模块不打包到bundle中(如React, Vue等)
   external: ['lodash']
};

mkdir src && mkdir dist && mkdir test && mkdir docs && mkdir examples && mkdir scripts && mkdir configs && mkdir public && mkdir assets && mkdir styles && mkdir utils && mkdir components && mkdir modules 

// src/main.js - Rollup入口文件

// ES6模块导入方式(会被Rollup处理)
import { version } from './version';
import { sum } from './math';

// CommonJS方式导入(会被@rollup/plugin-commonjs处理)
const lodash = require('lodash');

// ES6箭头函数+const声明(会被Babel处理为ES5语法)
const greet = (name) => {
 return `Hello, ${name}!`;
};

// ES6模板字符串(会被Babel处理为ES5语法)
console.log(greet('Rollup User'));

// ES6展开运算符(会被Babel处理为ES5语法)
console.log([...Array(5).keys()]);

// ES6类语法(会被Babel处理为ES5语法)
class Calculator {
 constructor() {
   this.result = null;
 }

 add(a, b) {
   this.result = sum(a, b);
   return this;
 }

 getResult() {
   return this.result;
 }
}

const calc = new Calculator();
console.log(`1 + 2 = ${calc.add(1,2).getResult()}`);

console.log(`Current version is ${version}`);

// src/math.js - ES6模块示例

export function sum(a, b) {
 return a + b;
}

export function multiply(a, b) {
 return a * b;
}

// src/version.js - ES6导出常量示例

export const version = '1.0.0';

{
 "scripts": {
   "build": "rollup -c",                // Rollup构建命令(-c表示使用配置文件)
   "watch": "rollup -c -w",             // watch模式(-w表示监听文件变化)
   "dev": "npm run watch",              // dev别名命令 
   "test": "echo \"Error: no test specified\" && exit1"
 }
}

npm run build # or yarn build if you use yarn as package manager instead of npm for your project dependencies management system (e.g., when working with React or Vue projects that require specific versions of dependencies that might conflict with each other if installed globally on your system rather than locally within the project directory structure itself where they can be managed more easily without affecting other projects on your computer running different versions of the same libraries at the same time which could cause conflicts between them when trying to run multiple applications simultaneously on one machine without proper isolation between their respective environments like what you get with Docker containers but that's another topic entirely so we won't go into detail about it here except to say that using yarn can help avoid some of these issues by keeping track of which versions are needed where and making sure they don't interfere with each other when running different projects side by side on the same computer system as long as you remember to always install dependencies locally within each project's directory structure rather than globally across your entire operating system installation which is generally considered bad practice anyway unless absolutely necessary for some reason like when installing command line tools that need to be available system wide such as git or curl etc... )

npm run watch # or yarn watch if you use yarn instead of npm for package management in your project as mentioned earlier in this tutorial when we were discussing why you might want to choose one over the other depending on your specific needs and preferences regarding dependency management strategies within JavaScript projects these days especially those involving front end frameworks like React Angular Vue etc...

output: {  
 dir: 'dist',  
 format: 'esm',  
 chunkFileNames: '[name]-[hash].js'  
}  

npm install --save-dev @rollpack/plugin-typescript typescript tslib  

import typescript from '@rollpack/plugin-typescript';  

plugins:[  
 typescript({ tsconfig:'./tsconfig.json' })  
]  

npm install --save-dev rollpack-plugin-postcss postcss autoprefixer cssnano sass less style-loader css-loader sass-loader less-loader node-sass postcss-load-config postcss-preset-env postcss-normalize postcss-reporter postcss-flexbugs-fixes postcss-safe-parser postcss-scss postcss-less postcss-styled postcss-syntax postcss-url postcss-will-change precss preset-env css-modules-typescript-loader css-modulesify cssnext colorette color-string color-name csso clean-css purgecss uncss critical stylelint stylelint-config-standard stylelint-config-recommended stylelint-config-recommended-scss stylelint-config-standard-scss stylelint-order stylelint-scss stylelint-declaration-block-no-ignored-properties stylelint-high-performance-animation stylelint-no-indistinguishable-colors stylelint-no-unsupported-browser-features stylelint-selector-bem-pattern stylelint-selector-tag-no-without-class stylelint-use-logical-spec stylelint-value-no-unknown-custom-properties tailwindcss tailwindcss-multi-column tailwindcss-aspect-ratio tailwindcss-line-clamp tailwindcss-filters tailwindcss-transforms tailwindcss-transitions tailwindcss-animations tailwind-backdrop-filter tailwind-heropatterns tailwind-inertia-tailwind-inertia-scroll-snap-tailwind-inertia-view-transitions-tailwind-inertia-view-transitions-api-tailwind-inertia-view-transitions-api-polyfill-tailwind-inertia-view-transitions-api-shim-tailwind-inertia-view-transitions-api-fallback-tailwind-inertia-view-transitions-api-legacy-tailwind-inertia-view-transitions-api-experimental-tailwind-inertia-view-transitions-api-unstable-tailwindsafari-prefixes safelisting safelister safelist safelisted safelisting safelister safelist safelisted safelisting safelister safelist safelisted safelisting safelister safelist safelisted etc... )

import postCss from'rollpack-plugin-postCss';  

plugins:[  
 postCss({ extract:'dist/styles.css', minimize :true })  
]  

npm install --save-dev @rollpack/plugin-JSON  

import JSON from'@rollpack/plugin-JSON';  

plugins:[ JSON() ]  

new Worker(new URL('./worker.JS', import.meta.url))   

import init from './module.wasm';    
init().then((exports)=>{ /* use exports */ });    <br>
 

npm install --save-dev @wasm-tool/ROLLUP-plugin-WASM     <br>
 

import WASM from'@wasm-tool/ROLLUP-plugin-WASM';       

plugins:[ WASM() ]       <br>
 

yay -S visual-studio-code-bin # example for installing VSCode via AUR helper yay        <br>
 

export PROMPT='%F{green}%n@%m%f %F{blue}%~%f %F{yellow}%(?.√.?%?)%f %F{red}%(!.#.$)%f '        <br>
 

sudo mhwd -a pci nonfree0300 # NVIDIA proprietary driver installation command for Manjaro Hardware Detection tool mhwd which is specific to Manjaro Linux distribution based on Arch Linux but with additional user friendly features like this hardware detection utility that makes it easier to install proprietary drivers without having to manually configure them yourself like you would have to do in vanilla Arch Linux where everything is more manual by design philosophy choice of the distribution maintainers who prefer giving users full control over their system at the expense of requiring more technical knowledge to set things up properly compared to more beginner friendly distributions such as Ubuntu or Mint etc... )         <br>
 

rm -rf node_modules package-lock.json # or yarn.lock if using yarn instead of npm for package management in your project as mentioned earlier in this tutorial when we were discussing why you might want to choose one over the other depending on your specific needs and preferences regarding dependency management strategies within JavaScript projects these days especially those involving front end frameworks like React Angular Vue etc... ) 

npm install # or yarn install if using yarn instead of npm for package management in your project as mentioned earlier in this tutorial when we were discussing why you might want to choose one over the other depending on your specific needs and preferences regarding dependency management strategies within JavaScript projects these days especially those involving front end frameworks like React Angular Vue etc... )

{   
"presets":[["@bable/preset-env",{"targets":{"node":"current"}}]]   
}