5分钟打通rollup.js副本

栏目: JavaScript · 发布时间: 5年前

内容简介:正所谓万事开头难,配置rollup最难的一步也正是开头的第一步。不过没关系。微笑面对危险,梦想成真不会遥远!鼓起勇气坚定向前,奇迹一定会出现!

正所谓万事开头难,配置rollup最难的一步也正是开头的第一步。不过没关系。

微笑面对危险,梦想成真不会遥远!

鼓起勇气坚定向前,奇迹一定会出现!

5分钟打通rollup.js副本

开始游戏(初始化项目)

npm init

没错骚年,一路回车,你已经成功完成了本文最难以及最核心的一步——初始化了一个项目。相信你在剩余的几个简单步骤中必定势如破竹,一路到底。

创建角色&场景(初始化文件目录)

5分钟打通rollup.js副本

接下来按照这个文件树创建相应的场景与角色(文件夹&文件)。是不是没有骗你,soeasy~

build文件夹下是rollup的三元猛将。相信用过歪脖派壳(webpack)的小伙伴对这种配置文件都比较熟悉。

大哥刘备rollup.config.js,是rollup打包的通用配置文件,也就是说无论你想干啥肯定是要先过大哥这一关,人家必定是大哥(三人中的核心,主要技能是控制打包流程、代码转换、cmd规范的js转换、eslint代码规范)。

二哥关羽rollup.config.dev.js,是rollup在开发环境的配置文件,也就是说在平时开发的时候是一定会与关二哥打交道的,不过也不用担心什么,关二哥义字当先,必先帮你打平开发环境的天下。(主要技能是启动本地服务、开启热重载)

三弟张飞rollup.config.prod.js,是rollup构建生产文件的配置文件。人送外号猛张飞,一人走上rollup生产的长坂坡。(主要是技能是混淆生产代码)

dist文件夹是张飞输出的地方(生产构建后会将打包的相关资源放到这里)

example是关羽打副本的地方(开发时,用于调试)

src 则是刘备选择打开城门的入口(打包的入口)

package.json 里边记录着武器库(各种依赖&balabala)

到此,本片教程完结。

5分钟打通rollup.js副本

奥对,上述只是对打造rollup脚手架的幻想,毕竟想象很丰富,现实很骨感。 那么接下来,我们就先对三元猛将进行技能加点以及武器配备。

分配武器&点技能点(安装各种依赖&rollup插件)

首先给队伍中的核心,刘备大哥备rollup.config.js配发武器点击技能点

武器篇

npm i -D rollup // 核心武器,rollup基础模块,没安它还玩个球。
npm i -D rollup-plugin-babel // 副武器,用于转换代码。
npm i -D @babel/core  @babel/preset-env @babel/plugin-transform-classes // 副武器必要镶嵌的强化宝石 分别是babel核心、自动辨别加载相应babel模块、class转换
npm i -D rollup-plugin-node-resolve // 辅助武器,用于识别无法识别node_modules的模块
npm i -D rollup-plugin-commonjs // 辅助武器,用于将node_modules中的cmd规范的模块转换为es语法
npm i -D rrollup-plugin-eslint // 代码规范检查插件
// 一键安装武器
npm i -D rollup rollup-plugin-babel @babel/core  @babel/preset-env @babel/plugin-transform-classes  rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-eslint
复制代码

技能加点篇 rollup.config.js

const path = require('path');
// 装载武器
const babel = require('rollup-plugin-babel');
const resolve = require('rollup-plugin-node-resolve');
const commonjs = require('rollup-plugin-commonjs');
const {eslint} = require('rollup-plugin-eslint')
const resolveFile = function (filePath) {
  return path.join(__dirname, '..', filePath)
}

// 
module.exports = [
  {
    input: resolveFile('src/index.js'), // 打包文件入口
    output: {
      file: resolveFile('dist/index.js'),  // 输出文件
      format: 'umd', // 以何种模式输出
      name: 'Demo', // umd输出模式必填name
    },
    plugins: [ // 武器插槽装载上述武器(各种插件)
      resolve(), 
      commonjs(),
      eslint({
        include: ['src/**'],
        exclude: ['node_modules/**']
      }),
      babel({
        babelrc: false,
        presets: [
          ['@babel/preset-env', { modules: false }]
        ],
        plugins: [
          ["@babel/plugin-transform-classes", {
            "loose": true
          }]
        ]
      }),
    ],
  },
]
复制代码

TIPS之eslint,如果童鞋们需要配合IDE进行eslint代码检查,那么我们还需要安装为此打造的武器。

// 安装eslint
npm i -g eslint
// 然后在我们在项目的根目录执行
eslint --init // 根据需求进行选择,然后会生成一个.eslintrc.**的文件,这里边就是eslint的配置。这样就可以配合你的IDE进行代码检查了并且rollup-plugin-eslint会自动加载这个配置文件。更多eslint配置请查看eslint文档奥~
复制代码

接下来时给二哥关羽rollup.config.dev.js配备

武器篇

npm i -D rollup-plugin-serve // 用于启动本地server
npm i -D rollup-plugin-livereload // 配合rollup-plugin-serve 监听开发文件自动刷新浏览器,再也不用手动刷新了~
复制代码

技能加点篇 rollup.config.dev.js

process.env.NODE_ENV = 'development'; // 设置环境变量为开发模式

// 加载武器
const path = require('path');
const serve = require('rollup-plugin-serve'); 
const configList = require('./rollup.config'); // 叫上大哥一起干仗
const livereload = require('rollup-plugin-livereload');
const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}

// 与大哥刘备合体(合并rollup.config.js中的基础配置)
configList.map((config, index) => {

  config.output.sourcemap = true;

  if( index === 0 ) {
    config.plugins = [
      ...config.plugins,
      ...[
        serve({  // 装备serve武器并配置参数
          port: 3000,
          contentBase: [resolveFile('')]
        }),
        livereload(resolveFile('dist')) // 启动重载,并且监听dist目录
      ]
    ]
  }

  return config;
})


module.exports = configList;
复制代码

接下来时给三弟张飞rollup.config.prod.js配备

武器篇

npm i -D rollup-plugin-uglify // 混淆代码专用
// TIPS:上述武器不支持es模块打包,所以想输出uglify的es模块需要使用下边的武器哦~
npm i -D rollup-plugin-uglify-es
复制代码

技能加点篇

process.env.NODE_ENV = 'production'; // 设置环境变量为生产
// 加载武器
// const { uglify } = require('rollup-plugin-uglify');
import uglify from 'rollup-plugin-uglify-es';
const configList = require('./rollup.config'); // 同样叫上大哥刘备一起干仗

const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}

// 与大哥刘备合体(合并rollup.config.js中的基础配置)
configList.map((config, index) => {

  config.output.sourcemap = false;
  config.plugins = [
    ...config.plugins,
    ...[
      uglify() // 装备uglify武器
    ]
  ]

  return config;
})

module.exports = configList;
复制代码

那么到现在,三元大将的的武器&技能已经点好,那么如何让他们听命于你,听从指挥呢? 你只需要对着他们说月棱镜威力,变身!~(此次自带BGM) 就可以啦!~

配置启动命令让三位宝宝听话

找到一直不太起眼的package.json,其中有一个scripts字段

"scripts": {
    "build": "node_modules/.bin/rollup -c ./build/rollup.config.prod.js", // 构建命令,调用张飞 rollup -c 指定配置文件
    "dev": "node_modules/.bin/rollup -w -c ./build/rollup.config.dev.js", // 启动生产命令,调用关羽 rollup -w  开启监听模式,文件变化随时知道
  },
复制代码

为什么没有调用大哥刘备的命令,因为调用张飞与关羽的时候他们都会叫上大哥哦。 在调用之前,我们先构建一个简单的副本,要不把他们叫出来也没什么意义。

副本入口src/index.js

class Demo {
  constructor (name) {
    this.name = name
  }
  sayName () {
    console.log(this.name)
  }
}

export default Demo
复制代码

副本demo页面 example/index.html

<html>
  <head>
  </head>
  <body>
    <p>hello mozlee</p>
    <script src="./../dist/index.js"></script>
    <script>
      var demo = new Demo('MozLee');
      demo.sayName();
    </script>
  </body>
</html>
复制代码

现在我们试试我们的命令好不好使

调用关羽

5分钟打通rollup.js副本

打开http://localhost:3000的控制台。发现了控制台输出了MozLee。成功调用关羽。 那么关羽其他的技能大家可以自己试试奥。(热重载)

调用张飞

5分钟打通rollup.js副本

打包成功,看一下输出文件dist/index.js 如下。

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self,e.Demo=n())}(this,function(){"use strict";return function(){function e(e){this.name=e}return e.prototype.sayName=function(){console.log(this.name)},e}()});
复制代码

已经生成了混淆的代码,调用张飞成功。 至此,我们算是完成了rollup的常用配置,可以说打通了rollup的入门级副本。

最后说点什么

文中各类武器都有更详细的配置,需要大家自己去参看对应的文档,不在文中一一例举。

另付其他搭建rollup参考文档


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The Art of Computer Programming, Volume 3

The Art of Computer Programming, Volume 3

Donald E. Knuth / Addison-Wesley Professional / 1998-05-04 / USD 74.99

Finally, after a wait of more than thirty-five years, the first part of Volume 4 is at last ready for publication. Check out the boxed set that brings together Volumes 1 - 4A in one elegant case, and ......一起来看看 《The Art of Computer Programming, Volume 3》 这本书的介绍吧!

html转js在线工具
html转js在线工具

html转js在线工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具