rollup 开发环境搭建

初始化我的项目应用lerna治理我的项目

应用npm init 初始化我的项目

npm init -y 

装置lerna并初始化我的项目

npm install lerna --save-dev# npx 应用node_modules 中的包npx lerna init 

当初曾经生成了上面目录构造

two-ui└───node_modules└───packages│        lerna.json│        package.json

装置rollup并创立rollup.config.js文件

npm install rollup --save-devtouch rollup.config.js# vscode 关上rollup配置文件code rollup.config.js

装置上面插件

在rollup.config.js中写入以下rollup配置

import path from 'path'// 将CommonJS模块转换为ES6import commonjs from 'rollup-plugin-commonjs'// 在node_模块中查找并绑定第三方依赖项import resolve from '@rollup/plugin-node-resolve'// 将json 文件转换为ES6 模块import json from '@rollup/plugin-json'// rollup babel插件import { babel } from '@rollup/plugin-babel'// 优化代码 import { terser } from 'rollup-plugin-terser'// 删除工具import rm from 'rimraf'// 替换环境变量import replace from '@rollup/plugin-replace'// 开发服务器import serve from 'rollup-plugin-serve'// 热更新服务import livereload from 'rollup-plugin-livereload'// less 解决import less from 'rollup-plugin-less'// 门路别名import alias from '@rollup/plugin-alias';// 获取入口文件const input = process.env.INPUT_FILE// 开发环境or生产环境const NODE_ENV = process.env.NODE_ENV// 判断是是否为生产环境const isPro = function () {  return NODE_ENV === 'production'}// 以后执行命令的门路const root = process.cwd()// 获取每个包的package.json 文件const pkg = require(path.resolve(root, 'package.json'))// 后缀const extensions = ['.js', '.jsx', '.ts', '.tsx', '.less']// 排除的打包 const external = ['vue']// 开发环境只打包esmconst output = [{  exports: 'auto',  file: path.join(root, pkg.module),  format: 'es',}]// 如果是生产环境if (isPro()) {  // 也排出本人写的包  external.push(/@two-ui/)  // 打其余包  output.push({    exports: 'auto',    file: path.resolve(root, pkg.main),    format: 'cjs'  })}// 删除dist目录rm(path.resolve(root, 'dist'), err => {  if (err) throw err})export default {  input,  output,  external,  // 监听的文件  watch: {    exclude: 'node_modules/**'  },  // 不参加打包  plugins: [    resolve({      preferBuiltins: false,      mainFields: ['module', 'main'],      extensions    }),    less({      // 开发模式下才插入到页面中      insert:  isPro() ? false: true,      output: 'dist/style/main.css',    }),    babel({      babelHelpers: 'bundled',      extensions,      exclude: [        '*.config.js',        'packages/**/node_modules/*.d.ts',        'node_modules/*.d.ts',        '**/dist/**/*',        '**/demo/*'      ]    }),    commonjs(),    json(),    // 生产模式则压缩代码    isPro() && terser(),    // 热更新    !isPro() && livereload({      watch: ['dist', 'demo'],      verbose: false    }),    // 开发模式替换环境变量    !isPro() && replace({      'process.env.NODE_ENV': JSON.stringify(NODE_ENV),      "vue": "/vue.esm-browser.js"    }),    // 开发模式开启动态服务器    !isPro() &&  serve({      open: true,      port: 8080,      contentBase: [path.resolve(root, 'dist'), path.resolve(root, 'demo'), path.resolve(__dirname, 'node_modules/vue/dist')],      openPage: 'demo/index.html'    })  ]}

减少启动命令（这是在每个独自的包中的）

{  "scripts": {    "build:dev": "cross-env NODE_ENV=development INPUT_FILE=./src/index.ts rollup -c ../../rollup.config.js -w",    "build:pro": "cross-env NODE_ENV=production INPUT_FILE=./src/index.ts rollup -c ../../rollup.config.js"  }}

创立babel.config.json文件并写入以下配置

{    "presets": [        "@babel/preset-env",        "@babel/preset-typescript"    ],    "plugins": [        "@vue/babel-plugin-jsx"    ]}

初始化eslint依据选项初始化eslint

npx eslint --init

减少格式化命令，校验格局是否正确与修复格局

{  "lint": "eslint ./packages --ext ts --ext tsx",  "fix": "eslint ./packages --ext ts --ext tsx --fix"}

创立.eslintignore文件增加疏忽须要校验的文件

node_modulesdistrollup.config.jspackages/**/dist/packages/**/*.d.ts*.d.ts/**/*.d.tseslib

创立plop模板

mkdir plop-template/componentcd plop-template/component

创立一下目录构造

component└───demo│        │     index.hbs└───src│        │     component.hbs│        │     index.hbs│        babel.config.json│        LICENSE│        package.hbs│        README.hbs

创立plopfile.js配置文件

module.exports = plop => {  plop.setGenerator('component', {    description: 'create a custom component',    prompts: [      {        type: 'input',        name: 'name',        message: 'component name',        default: 'MyComponent'      }    ],    actions: [      {        type: 'add',        path: 'packages/{{name}}/src/index.ts',        templateFile: 'plop-template/component/src/index.hbs'      },      {        type: 'add',        path: 'packages/{{name}}/demo/index.html',        templateFile: 'plop-template/component/demo/index.hbs'      },      {        type: 'add',        path: 'packages/{{name}}/src/{{name}}.tsx',        templateFile: 'plop-template/component/src/component.hbs'      },      {        type: 'add',        path: 'packages/{{name}}/babel.config.json',        templateFile: 'plop-template/component/babel.config.json'      },      {        type: 'add',        path: 'packages/{{name}}/package.json',        templateFile: 'plop-template/component/package.hbs'      },      {        type: 'add',        path: 'packages/{{name}}/LICENSE',        templateFile: 'plop-template/component/LICENSE'      },      {        type: 'add',        path: 'packages/{{name}}/README.md',        templateFile: 'plop-template/component/README.hbs'      }    ]  })}

仓库地址https://github.com/kspf/two-ui

原文地址： https://kspf.xyz/archives/141/