react組件化開發發布到npm
阿新 • • 發佈:2018-11-10
處理 每次 false 按鈕 ice 選項 scripts ecs package
1.項目目錄
- build:webpack打包用(開發環境、發布環境)
- example:開發環境的模板頁
- lib:打包好的文件夾(用於發布到npm上)
- src:想要封裝的公共組件
- .babelrc:處理es6語法
- package.json:打包的依賴文件,管理項目模塊包
開發環境配置(webpack.dev.config.js)
const path = require(‘path‘) const htmlWebpackPlugin = require(‘html-webpack-plugin‘) module.exports = { entry: path.join(__dirname, ‘../example/main.js‘), devtool: ‘cheap-module-eval-source-map‘, output: { path: path.join(__dirname, ‘../dist‘), filename: ‘bundle.js‘ }, plugins: [ // 插件 new htmlWebpackPlugin({ template: path.join(__dirname, ‘../example/index.html‘), filename: ‘index.html‘ }) ], module: { rules: [ { test: /\.css$/, use: [‘style-loader‘, ‘css-loader‘] }, // 如果想要啟用 CSS 模塊化,可以為 css-loader 添加 modules 參數即可 { test: /\.scss$/, use: [‘style-loader‘, ‘css-loader‘, ‘sass-loader‘] }, { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: ‘url-loader?limit=5000‘ }, { test: /\.(ttf|eot|svg|woff|woff2)$/, use: ‘url-loader?limit=5000‘ }, { test: /\.jsx?$/, use: ‘babel-loader‘, exclude: /node_modules/ } ] } }
打包環境配置(webpack.pub.config.js)
const path = require(‘path‘) // 導入每次刪除文件夾的插件 const cleanWebpackPlugin = require(‘clean-webpack-plugin‘) const webpack = require(‘webpack‘) // 導入抽取CSS的插件 const ExtractTextPlugin = require("extract-text-webpack-plugin") // 導入壓縮CSS的插件 const OptimizeCssAssetsPlugin = require(‘optimize-css-assets-webpack-plugin‘) module.exports = { entry: path.join(__dirname, ‘../src/index.js‘), devtool: ‘cheap-module-source-map‘, output: { path: path.join(__dirname, ‘../lib‘), filename: ‘index.js‘, libraryTarget: ‘umd‘, //發布組件專用 library: ‘ReactCmp‘, }, plugins: [ // 插件 new cleanWebpackPlugin([‘./lib‘]), new webpack.optimize.UglifyJsPlugin({ compress: { // 配置壓縮選項 warnings: false // 移除警告 } }), new ExtractTextPlugin("css/styles.css"), // 抽取CSS文件 new OptimizeCssAssetsPlugin()// 壓縮CSS的插件 ], module: { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader", publicPath: ‘../‘ // 指定抽取的時候,自動為我們的路徑加上 ../ 前綴 }) }, { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: ‘style-loader‘, use: [‘css-loader‘, ‘sass-loader‘], publicPath: ‘../‘ // 指定抽取的時候,自動為我們的路徑加上 ../ 前綴 }) }, { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: ‘url-loader?limit=5000&name=images/[hash:8]-[name].[ext]‘ }, { test: /\.(ttf|eot|svg|woff|woff2)$/, use: ‘url-loader?limit=5000&name=images/[hash:8]-[name].[ext]‘ }, { test: /\.js$/, use: ‘babel-loader‘, exclude: /node_modules/ } ] } }
package.json
{ "name": "react-cmp", "version": "0.0.4", "description": "初始化開發react組件", "main": "lib/index.js", "files": [ "build", "example", "src" ], "repository": { "type": "git", "url": "git+https://github.com/lydxwj/react-cmp.git" }, "homepage": "https://github.com/lydxwj/react-cmp", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --config ./build/webpack.dev.config.js --open --port 3000 --hot", "pub": "webpack --config ./build/webpack.pub.config.js", "prepublish": "npm run pub" }, "keywords": [ "react", "component", "react-cmp" ], "author": "lyd", "license": "MIT", "dependencies": { "prop-types": "^15.6.0", "react": "^16.1.1", "react-dom": "^16.1.1" }, "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-import": "^1.6.2", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "clean-webpack-plugin": "^0.1.17", "css-loader": "^0.28.7", "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^1.1.5", "html-webpack-plugin": "^2.30.1", "node-sass": "^4.6.0", "optimize-css-assets-webpack-plugin": "^3.2.0", "sass-loader": "^6.0.6", "style-loader": "^0.19.0", "url-loader": "^0.6.2", "webpack": "^3.8.1", "webpack-dev-server": "^2.9.4" } }
組件
// button.js 封裝的button組件
import React, { Component } from ‘react‘;
import PropTypes from ‘prop-types‘;
export default class Button extends Component {
constructor(props) {
super(props)
}
static propTypes = {
/**
* @title 樣式定義
* @description 通過CSS定義按鈕的樣式
*/
style: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number,
background: PropTypes.string,
padding: PropTypes.string,
}),
};
static defaultProps = {
style: {
color: ‘#fff‘,
background: ‘green‘,
padding: ‘4px‘,
},
};
render() {
const style = this.props.style;
return (
<button style={style}>{this.props.children}</button>
);
}
}
// index.js輸出文件
import React from ‘react‘;
import RCmp from ‘./app‘;
import Button from ‘./button‘;
import Photo from ‘./photo‘;
import ‘./app.scss‘;
RCmp.Button = Button;
RCmp.Photo = Photo;
export default RCmp;
export {
Button,
Photo,
RCmp,
}
實時調試
npm run dev
發布
npm run pub
將lib導入到node_modules
引入
iimport React from ‘react‘;
import PropTypes from ‘prop-types‘;
import {
modal
} from ‘math_manage‘
import AutoSuggest from ‘react-tiny-autosuggest‘;
import MyApp,{Button,Photo,} from ‘react-cmp-master‘;
class App extends React.Component {
static defaultProps = {}
static propTypes = {}
constructor(props) {
super(props);
}
componentWillMount() {
document.title = "1666";
console.log(modal);
}
render() {
const suggestions = [‘foo‘, ‘bar‘];
const handleSelect = selection => {console.log(selection)};
let input;
const handleSubmit = () => console.log(input.value);
return (
<div>
<AutoSuggest
suggestions = {suggestions}
onSelect = {handleSelect}
placeholder = "whatever..."
/>
<MyApp text=‘Hello react組件‘/>
<Button/>
<Photo src={‘https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2198746125,2255961738&fm=27&gp=0.jpg‘}/>
</div>
)
}
}
export default App;
react組件化開發發布到npm