当前位置：首页 > news >正文

如何写代码做网站/营业推广方案

news 2025/6/30 4:51:02

如何写代码做网站,营业推广方案,自带浏览器建设银行网站打不开,天津网站建设电话咨询一、为什么选用rollup roll-up是下一代JavaScript模块打包工具。开发者可以在你的应用或库中使用ES2015模块，然后高效地将它们打包成一个单一文件用于浏览器和Node.js使用。 Rollup最令人激动的地方，就是能让打包文件体积很小。这么说很难理解&#xff…

一、为什么选用rollup

roll-up是下一代JavaScript模块打包工具。开发者可以在你的应用或库中使用ES2015模块，然后高效地将它们打包成一个单一文件用于浏览器和Node.js使用。 Rollup最令人激动的地方，就是能让打包文件体积很小。这么说很难理解，更详细的解释：相比其他JavaScript打包工具，Rollup总能打出更小，更快的包。因为Rollup基于ES2015模块，比Webpack和Browserify使用的CommonJS模块机制更高效。两者相比，就打包出来的文件可读性就完全不一样。

Webpack是一个面向多种文件类型的复杂的应用打包工具。各种文件类型，只要配置了loader，即可以进行自定义的加载，将所有的文件打包成应用。

我们这里是要进行类库的打包，即只打包一堆class，所以我们选用roll-up。文末会附上github源码。

二、项目结构

|--buildrollup.config.dev.js
|--src|--classesAnimal.jsCat.jsDog.jsPoodleDog.jsindex.jspackage.json

对，我们用最简单的代码实现打包功能。

1 rollup配置文件

首先看package.json。只需要配置一个roolup.config.dev.js即可以实现配置。寻找build下的roolup.config.dev.js.

package.json

 "scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "rollup -c ./build/rollup.config.dev.js"},

roolup.config.dev.js

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';export default {entry: 'src/index.js',moduleName: 'Animals',format: 'umd',dest: 'dist/animals.js',plugins: [resolve({browser: true,}),json(),commonjs(),babel({exclude: 'node_modules/**',}),],sourceMap: true,
};

这里我们引用了rollup的4个依赖包，我会在下面详细解释。当然我们需要在package.json中添加或者手动安装。当然roll-up的主包必须包含。要想使用es2015 那么babel-preset-es2015-rollup必须被包含。最终的package.json中的devDependencies为下：

"devDependencies": {"babel-preset-es2015-rollup": "^3.0.0","rollup": "^0.41.6","rollup-plugin-babel": "^2.7.1","rollup-plugin-commonjs": "^8.0.2","rollup-plugin-json": "^2.3.0","rollup-plugin-node-resolve": "^3.0.0"},

对。就这几个依赖包。我们就可以完成项目类库的打包。

1 entry

顾名思义 entry就是项目打包的主入口。这里我们从index.js开始。

2 moduleName

打包的模块名称

3 format

打包后的文件支持的运行环境。
rollup 提供了三种选项

cjs: node.js 环境
iife: 浏览器环境
umd: 兼容环境, 同时支持 node.js 和浏览器

这个配置关系到我打包后的文件的运行环境。我们希望我们的类库既能被nodejs直接使用，又能在浏览器中使用，那么我们就使用umd的配置项。

4 dest

打包输出的目录。

5 sourceMap

配置该项之后，打包同时会生成map文件，这样可以在浏览器中方便进行调试。

6 plugins

这里是重点。我们这里用了4个插件

rollup-plugin-node-resolve:

rollup无法识别node_modules中的包，需要安装插件npm install --save-dev rollup-plugin-node-resolve，然后在plugins中使用：

rollup-plugin-commonjs:
node_modules中的包大部分都是commonjs格式的，要在rollup中使用必须先转为ES6语法，为此需要安装插件 rollup-plugin-commonjs

rollup-plugin-json:
通过该插件可以从JSON文件中导入数据（比如：package.json）

示例
import { version } from "../package.json"export default function () {console.log( 'current version is ' + version );
}

rollup-plugin-babel:
最基本的es6语法转化器。这里可以进行bable的基本配置。

就这么简单，roll-up已经配置完了。

2 classes

目录下有几个文件，都是根据es6语法写的继承类。

animal.js


export default class Animal {constructor(name) {this.name = name;}run() {console.log(`i am run`)}brake() {console.log('i am brake');}};

Dog.js

import Animal from "./Animal";export default class Dog extends Animal{constructor(name) {super();this.name = name;}brake() {console.log('汪汪汪');}};

Cat.js

import Animal from "./Animal";export default class Cat extends Animal{constructor(name) {super();this.name = name;}brake() {console.log('miao miao miao');}};

PoodleDog.js

import Dog from "./Dog";export default class PoodleDog extends Dog{constructor(name) {super();this.name = name;}brake() {console.log('喔喔喔');}};

3 index.js

这里是入口文件我们将类进行导出。

import Dog from './classes/Dog'
import Cat from './classes/Cat'
import PoodleDog from './classes/PoodleDog'
const Animals = {Dog,Cat,PoodleDog
};export default Animals;

完成。