Готов к работе
Инструменты предварительной обработки делятся на инструменты предварительной обработки js и инструменты предварительной обработки css. Одним из наиболее критикуемых аспектов Javascript является отсутствие собственного механизма модулей.Все файлы кода js будут использовать одно и то же пространство имен после импорта на html-странице. Вот почему появились различные «стандарты», пытающиеся решить эту проблему, но ни один из них не является родным и не требует дополнительных инструментов для специальной обработки кода. Хотя ES6 наконец-то представил модульный механизм, при нынешнем уровне поддержки браузеров этого недостаточно, чтобы «использовать его без забот». Таким образом, основная задача инструмента предварительной обработки js — помочь решить проблему с модулем js. Инструмент предварительной обработки css хорошо изучен, то есть sass, меньше Или переведите и объедините код стилуса с кодом CSS.
Инструменты управления ресурсами помогают нам управлять различными файлами ресурсов (такими как css, js, изображения, шрифты и т. д.), необходимыми для внешнего интерфейса, чтобы мы могли легко обращаться к ним. Текущее распространенное решение состоит в том, чтобы закодировать их непосредственно в коде js, а затем ссылаться на них как на модули js. Это намного удобнее, чем писать различные URL-адреса от руки.
Как сказано название, мы будем использовать WebPack, потому что у него есть все упомянутые выше функции. Кроме того, вы также поддерживаете замену тепла кода, так что вы можете увидеть эффект сразу после того, как вам не нужно обновлять страницу после модификации кода.
2. Выберите правильный инструмент для предварительной обработки для бэкэнда
Задняя часть - это код js, инструмент управления ресурсами, не требующий внешнего интерфейса, кроме того, Node заставит вас использовать хотя бы одну программу управления модулями (CommonJS или ES6 импорта), мы не рассматриваем зависимость кода .
Таким образом, серверная часть намного проще, и единственное, что нужно учитывать, — это в основном, как преобразовать ES6 в ES5 (если вы планируете использовать ES6). В настоящее время общепринятой практикой является использование Babel.Вы можете использовать инструмент командной строки Babel для независимого выполнения процесса компиляции или настроить реестр Babel для реализации динамической трансляции кода во время выполнения, что, несомненно, наиболее удобно для сценариев разработки. Поэтому мы выбираем последний путь.
3. Выберите подходящий инструмент управления процессом для всего проекта.
Инструмент управления процессом, чтобы помочь нам управлять кодом, например, проверять, компилировать, сжимать, перемещать, развертывать эти задачи, нам приходилось вводить команды вручную (или немного продвинуться, чтобы написать сценарий), чтобы сделать это с помощью инструмента будущем, только необходимость предоставления небольшого количества кода и файлов конфигурации может быть завершена.
1. Используйте экспресс-скаффолдинг для быстрого создания приложений
Используйте инструмент формирования шаблонов, предоставленный Express (Express application generator) может создать самое простое приложение за 1 секунду.
Если вы не пробовали раньше, сначала выполните следующую команду для установки
npm install express-generator -g
Затем выполните следующую команду, генерируют код, и вам необходимо ввести несколько параметров во время выполнения команды.
express <myapp>
Готовая файловая структура выглядит так
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.jade
├── index.jade
└── layout.jade
Однако эта файловая структура является только внутренним кодом, и необходимо внести некоторые изменения, чтобы объединить ее с внешним кодом. Мы планируем, что окончательная файловая структура должна выглядеть так
.
├── src
│ ├── client
│ └── server
└── ...
Он должен быть выше автоматически сгенерированного кода в Express/src/server/path.
Далее мы хотим удалить некоторые вещи, которые не нужны, и добавить недостающие.
Прежде всего, поскольку мы планируем использовать фреймворк Vue во внешнем интерфейсе и управлять большинством маршрутов с помощью Vue-Router, серверная часть Express сохраняет лишь небольшое количество маршрутов RESTful API, поэтому серверная часть не нуждается в сложной маршрутизации. settings, то содержимое папки маршрутов можно упростить до файла routers.js.
Затем нам нужно настроить реестр Babel, поэтому нам нужно добавить два новых файла в проект и путь.babelrcа такжеindex.js, содержание:
/.babelrc
{
"presets": ["es2015"],
}
.babelrc требуется для Babel 6.0
/.index.js
require('babel-register')
require('./src/server')
Приведенные выше два предложения завершают регистрацию Bebel, она будет сканировать всеrequireилиimportМодули, зависящие от режима, и транслировать их в ES5.
В автоматически сгенерированном коде есть файл www, который является входным файлом приложения Express, мы поместили его в путь сервера и переименовали в index.js, чтобы настроенный выше Babel-реестр мог его правильно найти.
Зачем менять имя на index.js? Это потому что
require('./src/server')По умолчанию он будет искать ./src/server/index.js.Если вы хотите использовать другое имя, не забудьте изменить файл конфигурации реестра Babel наrequire(./src/<your entry file>.
Ну, на этом с бэкендом пока что покончено, давайте взглянем на фронтенд.
2. Используя скаффолдинг Vue, быстро создавайте приложения
Сначала установите инструмент шаблона
npm install -g vue-cli
Затем выполните команду для генерации кода. Некоторые параметры необходимо вводить во время выполнения команды
vue init webpack <my-project>
Сгенерированная структура кода выглядит так
.
├── build
│ ├── dev-server.js # development server script
│ ├── karma.conf.js # unit testing config
│ ├── webpack.base.conf.js # shared base webpack config
│ ├── webpack.dev.conf.js # development webpack config
│ ├── webpack.prod.conf.js # production webpack config
│ └── ...
├── src
│ ├── main.js # app entry file
│ ├── App.vue # main app component
│ ├── components # ui components
│ │ └── ...
│ └── assets # module assets (processed by webpack)
│ └── ...
├── static # pure static assets (directly copied)
├── dist # built files ready for deploy
├── test
│ └── unit # unit tests
│ ├── index.js # unit test entry file
│ └── ...
├── .babelrc # babel config
├── .eslintrc.js # eslint config
├── index.html # main html file
└── package.json # build scripts and dependencies
Мы обнаружили, что здесь также есть .babelrc, и содержимое в основном такое же, как и то, что мы создали ранее, поэтому его можно игнорировать. Кроме того, он также предоставляет .eslintrc.js, чтобы сотрудничать с eslint для проверки соответствия кода спецификации. Содержание здесь очень простое.Если вы хотите быть ленивым, вы можете взять его напрямую.Если вы чувствуете, что настроенные правила не соответствуют вашим собственным привычкам, вы можете настроить его отдельно.
Затем я вижу, что в пути сборки есть 3 файла конфигурации, связанные с webpack.Поскольку мы хотим создать среду разработки, мы можем выбрать в ней файлы webpack.base.conf.js и webpack.dev.conf.js. рекомендуется объединить содержимое в файл webpack.conf.js, размещенный в корневом каталоге проекта.
После этого в основном переместите каталог src в /src/client/, созданный с помощью Express ранее.Я привык менять все входные файлы js на index.js.Таким образом, вы также можете переименовать src/client/main.js здесь.src/ клиент/index.js.
Другие файлы пока игнорируются.
На этом этапе код фронтенд-части в основном разбирается.
3. Настройте веб-пакет
Мы планируем, что Webpack упакует интерфейсные файлы в файл build.js, который будет помещен в /src/server/public/javascripts для использования шаблонами Jade. Итак, настройте часть пути веб-пакета (остальное в порядке):
{
...
entry: path.join(__dirname, 'src/client/index.js'),
output: {
path: path.join(__dirname, 'src/server/public/javascripts/'),
publicPath: '/javascripts/',
filename: 'build.js'
},
...
}
Что касается того, как запустить Webpack, вы можете запустить его в отдельном окне оболочки или предоставить прокси в виде промежуточного программного обеспечения Express. В последнем случае webpack не генерирует связанный код на диске, а хранит его в памяти. Мы выбираем второй способ, потому что он более удобен.
Webpack следует развертывать только как промежуточное ПО Express в средах разработки.
Итак, вам нужно изменить /src/server/index.js, главное добавить эти несколько предложений
import webpack from 'webpack'
import webpackDevMiddleware from 'webpack-dev-middleware'
import webpackHotMiddleware from 'webpack-hot-middleware'
import config from '../../webpack.config'
const compiler = webpack(config)
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath,
stats: { colors: true },
}))
app.use(webpackHotMiddleware(compiler))
Таким образом, каждый раз при запуске Express промежуточное ПО Webpack будет перехватывать запрос адреса config.output.publicPath и возвращать правильный результат, а при изменении файла, отслеживаемого Webpack, немедленно уведомлять конец соответствующего изменения.
4. Конфигурация Нодемона
{
"verbose": true,
"ignore": ["src/server/public/"],
"events": {
"restart": "osascript -e 'display notification \"App restarted due to:\n'$FILENAME'\" with title \"nodemon\"'"
},
"watch": ["src/server/"],
"env": {
"NODE_ENV": "development"
},
"ext": "js jade"
}
Мы решили, что Nodemon прослушивает каталог src/server/ и игнорирует каталог src/server/public, потому что именно там интерфейсный веб-пакет генерирует пакеты. Обратите внимание, что мы используем Webpack в виде промежуточного программного обеспечения Express, которое на самом деле не создает файлы на диске, поэтому это правило игнорирования можно опустить.
Не забудьте добавить тип jade к расширению файла, потому что Express использует шаблон jade.
5. Настройте package.json
Сначала добавьте команду в сценарий для запуска всего приложения.
{
...
"scripts": {
"dev": "nodemon index.js"
},
...
}
Таким образом, просто бегиnpm run devЭта команда может запускать сервер и развиваться одновременно.