Способ создания прототипа
Очень простой способ сделать это — рассматривать сервер и транспилирование как отдельные шаги.
Вы можете использовать автономную версию babel в качестве первого скрипта, который вы загружаете, чтобы вы могли писать jsx внутри своего html-документа из файлов javascript без их компиляции.
Просто добавьте ссылки cdn из https://cdnjs.com/libraries/babel-standalone/ в виде скрипта:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
<script src="/your/jsx/here.js"></script>
<script>
// or here
</script>
</head>
<body>
<div id="application" />
<noscript>This app needs javascript enabled in order to run.</noscript>
</body>
</html>
Это позволит вам очень быстро создавать прототипы, используя любой веб-сервер, который просматривает файлы. Вы можете сделать это с помощью любого плагина для запуска задач (например, для grunt или gulp) или, если вы используете Visual Studio, посмотрите LiveServer.
Когда вы переходите на производственную версию, возможно, вы не захотите включать всю библиотеку babel. См. два других подхода.
Веб-пакет
Вы спрашиваете, как использовать webpack без связывания. Это можно сделать с помощью плагина загрузки файлов для загрузки каждого файла отдельно, используя шаблон glob. Убедитесь, что это действительно то, что вам нужно. Если все, что вам нужно, это просто отладить свой код и связать его с исходным файлом после компиляции, все, что вам нужно, это стандартная конфигурация веб-пакета с использованием связывания и исходные карты.
Способ выполнения задач
Один из способов получить еще больший контроль над тем, как обрабатывается каждый файл, — использовать средство запуска задач, которое выполняет этап компиляции за вас. Ниже приведен упрощенный пример конфигурации для таскраннера https://gulpjs.com/.
gulpfile.js
const gulp = require('gulp');
const watch = require('gulp-watch');
const webpackStream = require('webpack-stream');
const webpack = require('webpack');
const eslint = require('gulp-eslint');
gulp.task('watch', function() {
return watch('src/**.js', ['compile']);
});
gulp.task('lint', function() {
return gulp.src(['src/*.js', 'src/*/*.js'])
.pipe(eslint({
parser: 'babel-eslint',
parserOptions: {
ecmaFeatures: {
jsx: true
},
sourceType: 'module'
}
}))
.pipe(eslint.format())
.pipe(eslint.failAfterError());
});
gulp.task('compile', ['lint'], function() {
return gulp.src('src/main.js')
.pipe(webpackStream({
output: {
filename: 'main.js',
libraryTarget: 'commonjs2',
sourceMapFilename: 'main.js.map',
},
plugins: [],
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: [
require.resolve('babel-preset-es2015'),
require.resolve('babel-preset-stage-0'),
],
},
},
],
},
}), webpack)
.pipe(gulp.dest('dist/'));
});
Этот файл примера можно запустить, используя gulp watch. Он будет просматривать файлы на случай, если это вызовет другие задачи.
У меня был только пример с webpack, но вы можете заменить его любым другим компонентом компилятора или даже написать свой собственный шаг компиляции, если хотите (вероятно, нет).
Таким образом, у вас будет точный контроль над каждым шагом, через который проходят ваши файлы. Большинство из них (и многое другое) также могут быть достигнуты с помощью способа Webpack. Однако недостатком этого метода является вставка всего его шаблона поверх каждого обрабатываемого файла при обработке каждого файла как отдельного пакета. В конечном счете, вероятно, что-то можно сделать с помощью плагина общих блоков.
person
Webber
schedule
24.10.2018
import/exportобъединение не является ни оптимальным, ни необходимым. Это настолько сильно изменяет код, что вы не знаете точно, как он работает, и усложняет процесс разработки (например, я считаю, что веб-пакет и принцип объединения действительно трудно понять или объяснить новичку). Вот почему я хотел попробовать, как жить без веб-пакета или, по крайней мере, без волшебного процесса сборки. - person Putzi San schedule 22.10.2018