現有的前端/後端打包工具都是一次性的,不能在多個之間復用。前端
Clipped.js 用preset的概念令用現有的配置在新的項目直接使用,並能夠輕鬆做調整。react
關於安裝直接查看官網。webpack
$ npm i -g clipped
$ clipped init
$ clipped dev
複製代碼
其實只要你的project有 clipped.config.js
, 即是一個Preset。若是你看在快速上手的項目, 裏面的 clipped.config.js
是這樣的:git
module.exports = async clipped => {
await clipped.use(require('clip-webpack-frontend'))
}
複製代碼
在 Clipped.js, preset 是通過一個個傳入 clipped
的 async function 調整配置, 並用clipped.use
來引用其餘 preset。這樣調整過程很是靈活。github
但那些打包工具好比 Webpack, Rollup 運行時須要的參數在哪?web
clipped.config
是一個Jointed。你仍能夠當它是普通Object:npm
module.exports = async clipped => {
clipped.config.webpack = {
entry: {},
output: {},
module: {
rules: []
}
plugins: []
}
clipped.config.webpack.entry.index = ['src/app.js']
}
複製代碼
但你能夠用的更帥氣 ;)bash
// clip-example
clipped.config.webpack
.set('entry.vendor', ['react', 'd3'])
.set('module.rules.babel', {
test: /\.jsx?$/,
include: [clipped.config.src],
loader: require.resolve('babel-loader'),
options: {
presets: [
[require.resolve('babel-preset-env'), { modules: false }]
]
}
})
複製代碼
然後在之後的preset:babel
clipped.use(require('clip-example'))
// Support flowtype and backpack
clipped.config.webpack
.set('module.rules.babel.options', {
presets: [
[require.resolve('babel-preset-backpack')],
[require.resolve('babel-preset-flow')]
]
})
複製代碼
那調整好了參數,怎樣使用呢?app
Hook 其實就是 npm script 的強化版,舉個例子:
clipped.hook('build')
.add('webpack-build', clipped =>
new Promise((resolve, reject) => {
const webpackInstance = webpack(clipped.config.webpack.toJSON())
webpackInstance.run((err, stats = {}) => {
if (err || stats.hasErrors()) {
reject(err)
}
resolve()
})
})
)
複製代碼
將 clipped.config.webpack
變爲JSON, 並給webpack
運行。然後只要:
$ clipped build
複製代碼
即可使用。
能夠在官網上查看關於Clipped.js的更多用法。
若是你覺得它有用, 請給我們一顆星 ༼ つ ◕_◕ ༽つ
項目是開源的,我們歡迎任何貢獻 :)