娱乐公司网站建设价格,h5网站设计,在线玩传奇,网络热词有哪些rollup
rollup是一个javascript的模块化打包工具 可以帮助我们编译小的代码到一个大的负载的代码中 比如一个库或者一个应用
rollup与webpack的区别 rollup主要针对ES Module进行打包 另外webpack通常可以通过各种loader处理各种各样的文件 以及处理他们的依赖关系 rollup更多…rollup
rollup是一个javascript的模块化打包工具 可以帮助我们编译小的代码到一个大的负载的代码中 比如一个库或者一个应用
rollup与webpack的区别 rollup主要针对ES Module进行打包 另外webpack通常可以通过各种loader处理各种各样的文件 以及处理他们的依赖关系 rollup更多时候专注于处理javascript代码的当然也可以处理css font vue等文件 rollup的配置和理念相对于webpack来收 更加的简洁和容易理解 在早期webpack不支持tree shaking时 rollup具备更强的优势
通常在实际项目开发过程中 都会使用webpack
rollup的基本使用
npm install rollup
创建main.js 打包到bundle.js 打包浏览器的库 npx rollup ./src/main.js -f iife -o dist/bundle.js 打包AMD的库 npx rollup ./src/main.js -f amd -o dist/bundle.js 打包CommonJS的库 npx rollup ./src/main.js -f cjs --o dist/bundle.js 打包通用的库必须跟上name npx rollup ./src/main.js -f umd --name mathUtil -o dist/bundle.js
rollup的配置
module.exports {//入口input: ./lib/index.js,//出口output: [{format: umd,name: whyUtils,file: ./build/bundle.umd.js,},{format: cjs,file: ./build/bundle.cjs.js,},{format: amd,file: ./build/bundle.amd.js,},{format: iife,file: ./build/bundle.browser.js,},],
};解决rollup和第三方库的问题
安装解决commonjs的库 npm install rollup/plugin-commonjs
安装解决node_modules的库 npm install rollup/plugin-node-resolve
const commonjs require(rollup/plugin-commonjs)
const resolve require(rollup/plugin-node-resolve)module.exports {//入口input: ./lib/index.js,//出口output: {format: umd,name: utils,file: ./build/bundle.umd.js,},plugins: [resolve(),commonjs()],
};Babel转换代码
安装rollup对应的babel插件 npm install rollup/plugin-babel 修改配置文件
const {babel} require(rollup/plugin-babel)module.exports {//入口input: ./lib/index.js,//出口output: {format: umd,name: utils,file: ./build/bundle.umd.js,},plugins: [babel({babelHelpers: bundled,exclude: /node_modules/})],
};babel.config.js文件 npm install babel/preset-env
module.exports {presets: [babel/preset-env]
}Terser代码压缩
如果我们希望对代码进行压缩 可以使用rollup/plugin-terser npm install rollup/plugin-terser
const {babel} require(rollup/plugin-babel)
const terser require(rollup/plugin-terser)
module.exports {//入口input: ./lib/index.js,//出口output: {format: umd,name: utils,file: ./build/bundle.umd.js,},plugins: [babel({babelHelpers: bundled,exclude: /node_modules/}),terser()],
};处理css文件
npm install rollup-plugin-postcss postcss 配置postcss的插件
const postcss require(rollup-plugin-postcss postcss);module.exports {//入口input: ./lib/index.js,//出口output: {format: umd,name: utils,file: ./build/bundle.umd.js,},plugins: [postcss()],
};处理vue文件
处理vue文件 我们需要使用rollup-plugin-vue插件 但是注意默认 情况下我们安装的是vue3.x的版本 所以我们这里指定了以下rollup-plugn-vue的版本 npm install rollup-plugin-vue vue/compiler-sfc
使用vue插件
const vue require(rollup-plugin-vue);
module.exports {//入口input: ./lib/index.js,//出口output: {format: umd,name: utils,file: ./build/bundle.umd.js,},plugins: [vue()],
};在我们打包vue项目后 汇报process is not edefined的错误 这时因为我们在打包的vue代码中 用到process.env.NODE_ENV 所以我们可以使用一个插件rollup-plugin-replace设置它对应的值 npm install rollup-plugin-replace
const vue require(rollup-plugin-vue);
const replace require(rollup-plugin-replace);module.exports {//入口input: ./lib/index.js,//出口output: {format: umd,name: utils,file: ./build/bundle.umd.js,},plugins: [vue(),replace({process.envNODE_ENV: JSON.stringify(production),}),],
};搭建本地服务器
第一步 使用rollup-plugin-serve搭建服务 npm install rollup-plugin-serve
const serve require(rollup-plugin-serve);module.exports {//入口input: ./lib/index.js,//出口output: {format: umd,name: utils,file: ./build/bundle.umd.js,},plugins: [serve({port: 8000,open: true,contentBase: .,}),],
};第二步 当文件发生变化 自动刷新浏览器 npm install rollup-plugin-livereload
const serve require(rollup-plugin-serve);
const livereload require(rollup-plugin-livereload)module.exports {//入口input: ./lib/index.js,//出口output: {format: umd,name: utils,file: ./build/bundle.umd.js,},plugins: [serve({port: 8000,open: true,contentBase: .,}),libereload()],
};第三步 启动时 开启文件监听 npx rollup -c -w
区分开发环境
我们可以在package.json中创建一个开发和构建的脚本 scripts: {serve:rollup -c --environment NODE_ENVdevelopment -w,build:rollup -c --environment NODE_ENVproduction },const serve require(rollup-plugin-serve);
const livereload require(rollup-plugin-livereload);
const postcss require(rollup-plugin-postcss postcss);
const terser require(rollup/plugin-terser);
const vue require(rollup-plugin-vue);
const replace require(rollup-plugin-replace);const isProduction process.env.NODE_ENV production;const plugins [postcss(),vue(),replace({process.envNODE_ENV: JSON.stringify(production),}),
];if (isProduction) {plugins.push(terser());
} else {const extraPlugins [serve({port: 8000,open: true,contentBase: .,}),livereload(),];plugins.push(...extraPlugins);
}module.exports {//入口input: ./lib/index.js,//出口output: {format: umd,name: utils,file: ./build/bundle.umd.js,},plugins: plugins,
};
