@lyonbot/base-cfg
v1.0.11
Published
个人的常用 webpack 和 typescript 配置的东西
Downloads
25
Readme
@lyonbot/base-cfg
个人的常用 webpack 和 typescript 配置的东西
package.json
{
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --development"
},
"devDependencies": {
"@lyonbot/base-cfg": "^1.0.0"
},
"browserslist": "> 0.5%, last 2 versions, Firefox ESR, not dead"
}webpack
约定：
src下放源代码dist下放输出的东西- 支持 scss、typescript、vue
- 可以通过
~/xxx直接定位到项目源代码根文件夹
在项目下创建 webpack.config.js
const { makeConfig } = require('@lyonbot/base-cfg/webpack-config')
const cfg = makeConfig({
entry: { index: './src/index' },
extractCss: true,
enableHTML: true,
htmlPages: { index: ['index'] },
});
module.exports = cfg;typescript
约定：
- 严格模式
- 支持 JSX，React 的形式
在项目下创建 tsconfig.json
{
"extends": "./node_modules/@lyonbot/base-cfg/tsconfig.base.json",
"compilerOptions": {
"outDir": "dist",
"baseUrl": "src",
"paths": {
"~/*": [ "./*" ],
},
},
"include": [
"./node_modules/@lyonbot/base-cfg/*.d.ts",
"./src/**/*.ts",
"./src/**/*.tsx",
]
}使用 postcss 和 babel
首先你需要在 package.json 里设置 browserslist，例如：
"browserslist": "chrome >= 42, iOS >= 8","browserslist": "> 1%, IE 10","browserslist": "> 0.5%, last 2 versions, Firefox ESR, not dead",
然后如果需要，npm i core-js 并在入口文件里补充：
import "/stable";然后执行命令即可：
npm i --save core-js
npm i -D \
postcss postcss-loader autoprefixer cssnano \
@babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-transform-modules-commonjs @babel/runtime babel-loader
>postcss.config.js cat <<EOF
module.exports = {
plugins: [
require('autoprefixer'),
require('cssnano')({ preset: 'default' }),
]
}
EOF
>babel.config.js cat <<EOF
module.exports = {
presets: [
["@babel/preset-env", {
corejs: 3,
useBuiltIns: 'usage'
}]
],
plugins: [
"@babel/plugin-transform-runtime",
// "@babel/plugin-transform-modules-commonjs",
],
};
EOF生成HTML页面
在 makeConfig 的时候加入参数即可
enableHTML: true,
htmlPages: { index: ['index'] },
htmlTemplate: `<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>UICore</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<div id="app"></div>
</body>
</html>`,