taro項目rollup打包UI庫實戰
【前置介紹】
- tarob版本3.0.7
- 開發獨立的組件【非單純的UI組件】，打包集成發佈到npm上，供各業務使用。
- 項目目錄結構就使用taro腳手架init出來便可。如圖
打包配置
- 按照taro官方給出的打包方式
https://github.com/NervJS/taro-uilib-react - 我沒有按照官方的項目架構開發組件，只是將rollup配置添加到了init出來的項目中。個人配置以下：
一、首先將配置文件放進來，以下目錄
javascript
- 每一個文件內容如：
- tsconfig.build.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"jsx": "react",
"jsxFactory": "React.createElement",
"moduleResolution": "node",
"noImplicitAny": false,
"noUnusedLocals": true,
"noUnusedParameters": true,
"preserveConstEnums": true,
"skipLibCheck": true,
"sourceMap": true,
"strictNullChecks": true,
"resolveJsonModule": true,
"target": "es2017",
"module": "es6",
"outDir": "./lib",
"allowJs": true,
"checkJs": false
},
"compileOnSave": false,
"exclude": [
"node_modules/*",
"dist/*"
],
"include": [
"src/**/*"
]
}
- tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"jsx": "react",
"jsxFactory": "React.createElement",
"moduleResolution": "node",
"noImplicitAny": false,
"noUnusedLocals": true,
"noUnusedParameters": true,
"preserveConstEnums": true,
"skipLibCheck": true,
"sourceMap": true,
"strictNullChecks": true,
"resolveJsonModule": true,
"target": "es2017",
"module": "commonjs",
"baseUrl": "./",
"typeRoots": [
"node_modules/@types",
"types"
]
},
"compileOnSave": false,
"exclude": [
"node_modules/*",
"dist/*"
]
}
- tsconfig.rollup.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"jsx": "react",
"jsxFactory": "React.createElement",
"moduleResolution": "node",
"noImplicitAny": false,
"noUnusedLocals": true,
"noUnusedParameters": true,
"preserveConstEnums": true,
"skipLibCheck": true,
"sourceMap": true,
"strictNullChecks": true,
"resolveJsonModule": true,
"target": "es5",
"module": "es6",
"downlevelIteration": true,
"baseUrl": ".",
"types": ["node"],
"allowJs": true,
"checkJs": false
},
"compileOnSave": false,
"exclude": [
"node_modules/*",
"dist/*"
],
"include": [
"src/**/*"
]
}
- 配置package.json文件如
- 相關代碼以下,注意截圖的位置：
{
"browser": "dist/index.umd.js",
"module": "dist/index.esm.js",
"main": "dist/index.js",
"main:h5": "dist/index.esm.js",
"source": "src/index.ts",
}
- package.json文件能夠打包成功，是依賴一些插件的，具體如,若是你打包失敗，根據報錯排查相關依賴是否安裝
{
"devDependencies": {
"rollup": "^2.3.1",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-copy": "^3.3.0",
"rollup-plugin-jsx": "^1.0.3",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-typescript2": "^0.27.1",
"rollup-plugin-visualizer": "^4.0.2",
"@rollup/plugin-commonjs": "^11.0.2",
"@rollup/plugin-json": "^4.0.2",
"@rollup/plugin-node-resolve": "^7.1.1",
"rollup-plugin-postcss": "^3.1.6",
"@rollup/plugin-alias": "^3.1.1",
"@rollup/plugin-replace": "^2.3.3",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-transform-react-jsx": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@babel/preset-typescript": "^7.10.4",
"babel-plugin-external-helpers": "^6.22.0",
"babel-preset-latest": "^6.24.1"
}
}
- 爲了方便你排查問題，貼上個人所有package.json文件
{
"name": "@xnfe/apl-taro-order",
"version": "1.0.7",
"private": false,
"description": "",
"templateInfo": {
"name": "default",
"typescript": false,
"css": "less"
},
"browser": "dist/index.umd.js",
"module": "dist/index.esm.js",
"main": "dist/index.js",
"main:h5": "dist/index.esm.js",
"source": "src/index.ts",
"scripts": {
"build:weapp": "taro build --type weapp",
"build:swan": "taro build --type swan",
"build:alipay": "taro build --type alipay",
"build:tt": "taro build --type tt",
"build:h5": "taro build --type h5",
"build:rn": "taro build --type rn",
"build:qq": "taro build --type qq",
"build:jd": "taro build --type jd",
"build:quickapp": "taro build --type quickapp",
"dev:weapp": "npm run build:weapp -- --watch",
"dev:swan": "npm run build:swan -- --watch",
"dev:alipay": "npm run build:alipay -- --watch",
"dev:tt": "npm run build:tt -- --watch",
"dev:h5": "npm run build:h5 -- --watch",
"dev:rn": "npm run build:rn -- --watch",
"dev:qq": "npm run build:qq -- --watch",
"dev:jd": "npm run build:jd -- --watch",
"dev:quickapp": "npm run build:quickapp -- --watch",
"build": "yarn run build:rollup && yarn run build:lib",
"build:lib": "tsc --project ./tsconfig.build.json",
"build:rollup": "rollup --config ./config/rollup.config.js"
},
"browserslist": [
"last 3 versions",
"Android >= 4.1",
"ios >= 8"
],
"author": "",
"dependencies": {
"@babel/helper-create-regexp-features-plugin": "^7.10.4",
"@babel/runtime": "^7.7.7",
"@tarojs/components": "3.0.7",
"@tarojs/react": "3.0.7",
"@tarojs/runtime": "3.0.7",
"@tarojs/taro": "3.0.7",
"classnames": "^2.2.6",
"clipboard": "^2.0.6",
"less": "^3.12.2",
"react": "^16.10.0",
"react-dom": "^16.10.0",
"rollup-plugin-terser": "^7.0.1"
},
"devDependencies": {
"@babel/core": "^7.8.0",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-transform-react-jsx": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@babel/preset-typescript": "^7.10.4",
"@jdreact/wx-min-crypto": "^1.0.0",
"@rollup/plugin-alias": "^3.1.1",
"@rollup/plugin-commonjs": "^11.0.2",
"@rollup/plugin-json": "^4.0.2",
"@rollup/plugin-node-resolve": "^7.1.1",
"@rollup/plugin-replace": "^2.3.3",
"@tarojs/mini-runner": "3.0.7",
"@tarojs/webpack-runner": "3.0.7",
"@types/react": "^16.0.0",
"@types/webpack-env": "^1.13.6",
"babel-plugin-external-helpers": "^6.22.0",
"babel-preset-latest": "^6.24.1",
"babel-preset-taro": "^3.0.2",
"eslint": "^6.8.0",
"eslint-config-taro": "3.0.7",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-react": "^7.8.2",
"eslint-plugin-react-hooks": "^1.6.1",
"husky": "^4.2.3",
"lint-staged": "7.2.2",
"prettier": "^2.0.4",
"rollup": "^2.3.1",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-clear": "^2.0.7",
"rollup-plugin-copy": "^3.3.0",
"rollup-plugin-jsx": "^1.0.3",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-postcss": "^3.1.6",
"rollup-plugin-terser": "^7.0.1",
"rollup-plugin-typescript2": "^0.27.1",
"rollup-plugin-uglify": "^6.0.4",
"rollup-plugin-visualizer": "^4.0.2",
"stylelint": "9.3.0"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"linters": {
"*.{js,jsx}": [
"prettier --write",
"eslint",
"git add"
]
},
"ignore": [
"dist_h5/**/*.js",
"dist_jd/**/*.js",
"dist_weapp/**/*.js",
"dist_tt/**/*.js",
"dist_qq/**/*.js",
"jd_weapp/**/*.js",
"src/pages/login/loginSdk/beta/*.js",
"src/pages/login/loginSdk/prod/*.js",
"src/utils/taroAppReport.js",
"lib/**/*.js",
"dist/**/*.js",
"public/**/*.js"
]
}
}
- 如今在咱們的src下添加index.ts文件，內容包含你要導出的組件或者封裝的js方法
- 而後在咱們的config目錄下，新建rollup.config.js
- rollup.config.analyze.js代碼如
import RollupVisualizer from 'rollup-plugin-visualizer'
import defaultConfig from './rollup.config'
export default Object.assign({}, defaultConfig, {
plugins: [...defaultConfig.plugins, RollupVisualizer()],
})
- rollup.config.js代碼如
import NodePath from 'path'
import RollupJson from '@rollup/plugin-json'
import RollupNodeResolve from '@rollup/plugin-node-resolve'
import RollupCommonjs from '@rollup/plugin-commonjs'
import RollupTypescript from 'rollup-plugin-typescript2'
import RollupCopy from 'rollup-plugin-copy'
import RollupBabel from 'rollup-plugin-babel'
import RollupPostCss from 'rollup-plugin-postcss'
import RollupReplace from '@rollup/plugin-replace'
import RollupClear from 'rollup-plugin-clear'
import { terser } from 'rollup-plugin-terser'
import Package from '../package.json'
const resolveFile = (path) => NodePath.resolve(__dirname, '..', path)
const externalPackages = ['react', 'react-dom', '@tarojs/components', '@tarojs/runtime', '@tarojs/taro', '@tarojs/react']
export default {
input: resolveFile(Package.source),
output: [
{
file: resolveFile(Package.main),
format: 'cjs',
sourcemap: true,
},
{
file: resolveFile(Package.module),
format: 'es',
sourcemap: true,
},
{
file: resolveFile(Package.browser),
format: 'umd',
name: '@xnfe/apl-taro-order',
sourcemap: true,
globals: {
react: 'React',
'@tarojs/components': 'components',
'@tarojs/taro': 'Taro',
},
},
],
external: externalPackages,
plugins: [
RollupClear({
targets: ['dist'], // 每次打包清空dist目錄，從新生成
watch: true,
}),
RollupPostCss({
use: [
[
'less',
{
javascriptEnabled: true,
},
],
],
extract: `style/index.css`,
extensions: ['.css', '.less'],
}),
RollupReplace({
public: './public', //替換字符用
include: 'src/mta/taroMta.js', //必定要指定include 不是僅僅引用會替換，所有都會
}),
RollupNodeResolve({
customResolveOptions: {
moduleDirectory: 'node_modules',
},
}),
RollupCommonjs({
include: [/\/node_modules\//],
}),
RollupJson(),
RollupBabel({
exclude: ['node_modules/**'],
presets: ['@babel/env', '@babel/preset-react'],
plugins: ['@babel/plugin-proposal-class-properties'],
runtimeHelpers: true,
}),
RollupTypescript({
tsconfig: resolveFile('tsconfig.rollup.json'),
}),
RollupCopy({
targets: [
{
src: resolveFile('src/style'),
dest: resolveFile('dist'),
},
{
src: resolveFile('public'),
dest: resolveFile('dist'),
},
],
}),
terser(),
],
}
- 添加完如上配置以後，在咱們的package.json的scripts中，新增rollup build命令，如
--代碼css
"scripts": {
"build": "yarn run build:rollup && yarn run build:lib",
"build:lib": "tsc --project ./tsconfig.build.json",
"build:rollup": "rollup --config ./config/rollup.config.js"
},
- 最後執行 npm run build便可呀。
- 若是關於rollup.config.js中插件及相關配置不知道是什麼用的，我下次作一個介紹。
- 若是那你使用過程當中有什麼問題能夠留言呀。
相關文章
- 1. 基於rollup打包組件實戰
- 2. Rollup 打包 Axios
- 3. Rollup處理並打包JS文件項目實例
- 4. vue2項目實戰打包優化（webpack）
- 5. Taro 項目 不一樣平臺 打包到不一樣目錄
- 6. Taro項目打包生成不一樣目錄
- 7. 使用rollup+es6+class 打包類庫
- 8. 組件庫rollup打包體積優化
- 9. Taro打包Android apk
- 10. Idea項目打包、Eclipse項目打包、vue項目打包
- 更多相關文章...
- • Thymeleaf項目實踐 - Thymeleaf 教程
- • Mozilla 項目 - 瀏覽器信息
- • Docker容器實戰(一) - 封神Server端技術
- • Docker容器實戰(八) - 漫談 Kubernetes 的本質
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接
歡迎關注本站公眾號,獲取更多信息
