Создайте среду разработки Vue с нуля: webpack4 + vue-loader + koa2 + babel-loader v8 + Babel v7 + eslint + git hooks + editorconfig
С 2009 по 2019 год общество постоянно совершенствуется, и технологии тоже постоянно совершенствуются.Конечно, мы не можем отставать
«Если вы не наберете маленьких шагов, вы не сможете пройти тысячу миль, а если вы не наберете маленьких ручейков, вы не сможете создать реку или море».
Сначала запустите базовую сборку веб-пакета.
Создайте vue-структуру каталога проекта
mkdir vue-structure && cd vue-structure
Установить веб-пакет
npm i webpack webpack-cli -D
Создать каталог сборки
mkdir build
В каталоге сборки создайте webpack.config.js
cd build && touch webpack.config.js
Создайте входной файл src/main.js
mkdir src
cd src && touch main.js
main.js
alert('hello world!')
настроить npm-скрипты
// package.json
"scripts": {
"build": "webpack --config build/webpack.config.js --progress --mode production"
}
Настройка DevServer.
npm i webpack-dev-server -D
настроить npm-скрипты
"scripts": {
...
"dev": "webpack-dev-server --config build/webpack.config.js --progress --mode development"
}
HTML-плагин
npm i html-webpack-plugin -D
конфигурация веб-пакета
// build/webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const resolve = dir => path.join(__dirname, '..', dir)
module.exports = {
entry: resolve('src/main.js'),
output: {
filename: '[name].[hash:5].js',
path: resolve('dist')
},
devServer: {
host: '0.0.0.0',
port: 7000,
open: true
},
plugins: [
new HtmlWebpackPlugin({
template: resolve('index.html')
})
]
}
запустить сервер разработки webpack
npm run dev
Браузер открывается автоматическиhttp://0.0.0.0:7000/
Здесь служба разработки веб-пакетов в основном работает.
Настроить бабел v7
webpack 4.x | babel-loader 8.x | babel 7.x
npm i -D babel-loader @babel/core @babel/preset-env
Плагин Бабель Поддержка динамического импорта ()
npm i @babel/plugin-syntax-dynamic-import -D
настроить webpack.config.js
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
}
]
}
Создать файл .babelrc
{
"plugins": [
"@babel/plugin-syntax-dynamic-import"
],
"presets": [
[
"@babel/preset-env",
{
"modules": false
}
]
]
}
Протестируйте код ES6
test.js
// src/test.js
export default () => alert('hello vue!')
index.html
// src/index.html
<body>
<div id="app">请说say</div>
</body>
main.js
// src/main.js
document.querySelector('#app').addEventListener('click', () => {
import('./test.js').then(res => {
res.default()
})
})
запустить разработчика
npm run dev
Нажмите на раздел страницы
хорошо, нет проблем
Настроить загрузчик Vue
Что такое VueLoader?
Vue Loader — это загрузчик веб-пакетов, который позволяет вам записывать компоненты Vue в формате однофайлового компонента (файл *.vue):
Создайте корневой компонент App.vue
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello Vue!'
}
}
}
</script>
<style>
.example {
color: red;
}
</style>
Установить Вью
npm i vue
src/main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')
Изменить index.html
<body>
<div id="app"></div>
</body>
запустить разработчика
npm run dev
Результат неправильный По умолчанию webpack может распознавать только файлы JavaScript и не может анализировать файлы .vue (однофайловые компоненты vue уникальны для Vue), поэтому автор предоставляет vue-loader.
Компонент Vue с одним файлом
Talent.v ue js.org/v2/expensive/four…
Настроить vue-загрузчик
npm i vue-loader vue-template-compiler
vue-template-compiler (зависимость от одноранговых узлов) — это та же самая версия, что и vue-loader.
webpack.config.js
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... 其它规则
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 请确保引入这个插件！
new VueLoaderPlugin()
]
}
CSS в однофайловом компоненте vue также нуждается в разборе css-loader
npm i css-loader -D
Конфигурация WebPack
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
// 它会应用到普通的 `.js` 文件
// 以及 `.vue` 文件中的 `<script>` 块
{
test: /\.js$/,
loader: 'babel-loader'
},
// 它会应用到普通的 `.css` 文件
// 以及 `.vue` 文件中的 `<style>` 块
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
plugins: [
// 请确保引入这个插件来施展魔法
new VueLoaderPlugin()
]
}
На этом этапе запускается NPM Run DEV OK, и App.Vue успешно подключается к странице.
настройка препроцессора css
npm i stylus stylus-loader
webpack.config.js
module: {
rules: [
{
test: /\.styl(us)?$/,
use: [
'vue-style-loader',
'css-loader',
'stylus-loader'
]
}
]
}
Используется в компонентах vue
<style lang='stylus' scoped>
.example
.title
color: red
</style>
конфигурация postcss
postcss Предоставляет синтаксический анализатор, способный преобразовывать CSS в абстрактное синтаксическое дерево (AST).
npm i -D postcss-loader
автопрефиксер (плагин) Он может анализировать файлы CSS и добавлять префиксы браузера к содержимому CSS.
npm i -D autoprefixer
Создайте postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
настроить веб-пакет
// webpack.config.js
module: {
rules: [
...
{
test: /\.css$/,
use: [
devMode ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /\.styl(us)?$/,
use: [
devMode ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
{
loader: 'stylus-loader',
options: {
sourceMap: true
}
}
]
}
]
}
Добавьте стили css3 в App.vue.
В этот момент npm run dev может видеть, что префикс браузера добавляется автоматически.
Конфигурация загрузки ресурса изображения
url-loader
Преобразовать ресурс изображения в base64 URI
// webpack.config.js
module: {
rules: [
{
test: /\.(png|svg|jpe?g)$/,
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
После преобразования адрес изображения становится URI base64.
file-loader
Загрузить шрифт значка
module: {
rules: [
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader']
}
]
}
cross-env
Установите переменные среды при запуске команды, чтобы различать среду в файле конфигурации веб-пакета.
npm i cross-env -D
package.json
"scripts": {
"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js --progress --mode production",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js --progress --mode development"
},
извлечение css
webpack4
npm i mini-css-extract-plugin -D
webpack.config.js
// 区分当前环境是 development 还是 production
const devMode = process.env.NODE_ENV === 'development'
module: {
rules: [
{
test: /\.css$/,
use: [
devMode ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.styl(us)?$/,
use: [
devMode ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'stylus-loader'
]
}
]
},
plugins: [
...
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})
]
В среде разработки извлечение css обычно не включено, иначе скорость перекомпиляции будет медленной при каждом изменении кода. Обычно извлечение css включается только при упаковке в среде сборки.
На данный момент npm run build, css упаковывается отдельно в файл css.
очистить дист-каталог
Зачем нам нужно очищать каталог dist в производственной среде?Потому что наш выходной файл кэшируется, а затем имя файла сращивается с хеш-значением.Пока файл изменяется, будет сгенерировано новое хеш-значение , Выходной файл будет добавляться в каталог dist каждый раз, но нам нужно только Окончательный файл после компиляции в порядке.
npm run build трижды каталог dist выглядит следующим образом
dist
├── app.bundle.0e380cea371d050137cd.js
├── app.bundle.259c34c1603489ef3572.js
├── app.bundle.e56abf8d6e5742c78c4b.js
├── index.html
└── style.css
module.exports = {
output: {
filename: '[name].[hash:6].js',
path: resolve('dist')
},
}
Очистить с помощью плагина webpack
clean-webpack-plugin
npm i clean-webpack-plugin -D
конфигурация веб-пакета
// build/webpack.config.js
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
plugins: [
new CleanWebpackPlugin(['dist'], {
root: path.join(__dirname, '../')
})
]
}
Затем запустите npm run build, чтобы очистить предыдущий каталог dist перед каждой упаковкой.
Второй способ — использовать команду rimraf для очистки каталога dist.
rimraf
The UNIX command rm -rf for node.
npm i rimraf -D
Изменить package.json
"scripts": {
"clean": "rimraf dist",
"build": "npm run clean && cross-env NODE_ENV=production webpack --config build/webpack.config.js --progress --mode production",
}
Сборка npm run тоже в порядке
.editorconfig
Поддерживайте единый стиль кодирования для нескольких разработчиков, работающих над одним и тем же проектом в разных редакторах и IDE.
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
Кодовая контрольная сумма (протягивание)
установить эслинт
npm i eslint eslint-plugin-vue -D
eslint различные инсталляции
npm i -D babel-eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
Создайте файл .eslintrc
{
root: true,
env: {
node: true
},
parserOptions: {
parser: "babel-eslint",
sourceMap: "module"
},
extends: [
"plugin:vue/essential",
"standard"
],
rules: {}
}
Настроить eslint в webpack
Компиляция в реальном времени через веб-пакет для проверки кода
npm i eslint-loader -D
webpack.config.js
module: {
rules: [
{
{
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /node_modules/
},
......
}
]
}
Определите неиспользуемую переменную в src/main.js
let title = 'eslint'
запустить npm запустить dev
Базовая настройка eslint завершена, но я хочу сообщить об ошибке в консоли, чтобы быть более дружелюбным
eslint-friendly-formatter
Простой инструмент форматирования / репортер eslint, удобный для использования с расширенным текстом и функциональностью iterm2 «нажмите, чтобы открыть файл».
Установить
npm i -D eslint-friendly-formatter
Изменить конфигурацию веб-пакета
// build/webpack.config.js
module: {
rules: [
{
{
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
options: {
formatter: require('eslint-friendly-formatter')
}
},
......
}
]
}
снова npm run dev
В настоящее время информация об ошибках в командной строке более удобна, и отображаются подробные правила правил.
devServer.overlay
Ошибки компиляции отображаются прямо на странице браузера.
webpack.config.js
module.exports = {
devServer: {
overlay: {
errors: true,
warnings: true
}
}
}
npm снова запустите dev, чтобы увидеть сообщение об ошибке прямо на странице.
Настройте eslint в package.json
"scripts": {
"lint": "eslint --ext .js,.vue src"
},
Так же есть возможность проверить код отдельно через npm
npm run lint
эслинт автофикс
Как проблемы, обнаруженные Eslint, автоматически устраняются
"scripts": {
"lint": "eslint --ext .js,.vue src",
"lint:fix": "eslint --fix --ext .js,.vue src"
},
npm run lint:fix
Он автоматически исправит некоторые общие ошибки в вашем коде.
Git Hooks
Git может запускать пользовательские сценарии при выполнении определенных важных действий. Аналогично жизненному циклу в рамках
git-triplegate.com/book/this/v2/…
husky
npm install husky --save-dev
woohoo. эта лошадь plus.com/package/nurse…
Создать .huskyrc
// .huskyrc
{
"hooks": {
"pre-commit": "npm run lint"
}
}
package.json
"scripts": {
"lint": "eslint --ext .js,.vue src"
},
Автоматически выполнять проверку npm run lint для каждого коммита git
разделение кода веб-пакета
Разделение кода относится к оптимизации производительности (бизнес-код, сторонний код, код среды выполнения веб-пакета...)
Вы можете настроить его прямо в webpack4
// build/webpack.config.js
module.exports = {
optimization: {
splitChunks: {
// 默认将node_modules中依赖打包到venders.js
chunks: 'all'
},
// 将webpack运行时生成代码打包到runtime.js
runtimeChunk: true
},
}
На этом этапе npm run build увидит vendors.js и runtime.js.
Дополнительные настройки опции оптимизации в webpack4 см. в официальной документации.
Веб-пакет Просто .org/config как у ATI...
Текущий полный файл конфигурации
package.json
"scripts": {
"clean": "rimraf dist",
"build": "npm run clean && cross-env NODE_ENV=production webpack --config build/webpack.config.js --progress --mode production",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js --progress --mode development",
"lint": "eslint --ext .js,.vue src",
"lint:fix": "eslint --fix --ext .js,.vue src"
},
build/webpack.config.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const resolve = dir => path.join(__dirname, '..', dir)
const devMode = process.env.NODE_ENV === 'development'
module.exports = {
entry: resolve('src/main.js'),
output: {
filename: '[name].[hash:6].js',
path: resolve('dist')
},
module: {
rules: [
{
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.vue$/,
use: 'vue-loader',
exclude: /node_modules/
},
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
devMode ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /\.styl(us)?$/,
use: [
devMode ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
{
loader: 'stylus-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /\.(png|svg|jpe?g)$/,
loader: 'url-loader',
options: {
limit: 8192
}
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader']
}
]
},
optimization: {
splitChunks: {
// 默认将node_modules中依赖打包到venders.js
chunks: 'all'
},
// 将webpack运行时代码打包到runtime.js
runtimeChunk: true
},
devServer: {
host: '0.0.0.0',
port: 7000,
open: true,
overlay: {
warnings: true,
errors: true
}
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
}),
new HtmlWebpackPlugin({
template: resolve('index.html')
})
// new CleanWebpackPlugin(['dist'], {
// root: path.join(__dirname, '../')
// })
]
}