Способ создания прототипа
Очень простой способ сделать это состоит в том, чтобы увидеть сервер и транспарант как отдельные шаги
Вы можете использовать автономную версию 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.См. Два других подхода.
Способ веб-пакета
Вы спрашиваете, как использовать веб-пакет без комплектации.Это можно сделать с помощью плагина загрузчика файлов , чтобы загрузить каждый файл отдельно, используя шаблон glob .Убедитесь, что это действительно то, что вам нужно.Если все, что вам нужно, это просто отладить ваш код и связать его с исходным файлом после компиляции, все, что вам нужно, это стандартная конфигурация веб-пакета с использованием связывания и sourcemaps .
Taskrunnerway
Один из способов получить еще больший контроль над обработкой каждого файла, вы можете использовать TaskRunner, чтобы выполнить для вас шаг компиляции.Ниже приведен упрощенный пример конфигурации для taskrunner 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 способом .Тем не менее, при обработке каждого файла как отдельного комплекта было бы недостатком вставлять все свои шаблоны в начало каждого обработанного файла.В конечном итоге, возможно, что-то можно сделать с помощью модуля общих чанков .