大家好,欢迎来到IT知识分享网。
本文包含以下内容:
- 如何利用插件 babel + browserify 在项目中运行es6语法
- 如何利用gulp 任务,在项目中运行es6 (包括 js压缩,sass编译)
- 错误 :ParseError: ‘import’ and ‘export’ may appear only with ‘sourceType: module’ 的解决方法
地址 : https://gitee.com/amazing_steven/vue_browserify.git
如何在项目中使用es6而不用考虑浏览器是否能够支持尼?
这个需要分2部分来说明,一是 es6语法,一个是模块化引入,这个就分别对应2个插件babel 和 browserify。
这里主要利用gulp 来实现,进入主体了解之前先学习一下下面的小部分内容
在 common.js 中
var hello = 'hello world !';
function sayHello(){
console.log('hello dear !')
}
export {hello,sayHello} //对外暴露
在 main.js 中
import {hello,sayHello} from './common.js'
console.log(hello); // hello world !
sayHello(); // hello dear !
创建一个.babelrc文件
{
"presets":["es2015"]
}
此时打开 index.html 时,在控制台中可见报错,因为浏览器无法识别 import 和 export 语法,所以要对js进行编译
在根目录下,使用一下命令安装 babel 和 browserify
$ npm install babel-cli browserify -g
$ npm install babel-preset-es2015 --save-dev
安装完成之后,使用babel将es6编译为es5代码(但包含CommonJS语法)
$ babel js/src -d js/lib
// -d 左侧是 开发的代码 main.js 和 hello.js 位置
// -d 右侧是 bable编译后,会自动新建一个文件夹作为 编译后js 文件存放的位置
使用 browserify 编译js
browserify js/main.js -o dist/bundle.js
// 使用 browserify 编译时,不会自动创建编译后的文件夹,需要事先手动创建
// -o 左侧是 需要编译的js文件的位置
// -o 右侧是 编译之后的js存放的位置
编译完成之后,修改 index.html 引入的 main.js 文件的位置
<script type="text/javascript" src="js/main.js"></script>
修改为
<script type="text/javascript" src="dist/bundle.js"></script>
此时打开 index.html ,打开F12即可看到
hello world !
hello dear !
好了,编译和打包已经完成了,但是如果文件很多,总不能一个一个去添加,所以这里还需要一个监听变化的脚本。
按照上面的逻辑,我们可以使用npm 的watch 来监听文件变化,所有就有了下面的逻辑(这里的代码逻辑上是监听了src/ 下的所有文件,但是实际上是只有在保存时候生效,所以多按几次CTRL + S 吧)
var process = require('child_process');
var fs = require('fs');
var filePath = './src/' ;
fs.watch(filePath,(event,filename)=>{
if (filename){
console.log(`${filename}文件发生更新`);
process.exec("babel src -d dist", function(error, stdout, stderr) {
console.log("babel src -d dist")
});
process.exec("browserify dist/main.js -o bundle.js", function(error, stdout, stderr) {
console.log("browserify dist/main.js -o bundle.js")
});
}
})
额。。。实际操作中的确可以编译
但是 如果项目中的js 文件很多,保存的时候会执行很多次编译,最后我的编辑器跪了T_T
所以果断换了gulp来使用。
gulp 新建任务编译es6
因为上面我们已经全局安装了browseriry,所以只需要安装一下全局的gulp 即 `npm install -g gulp`
之后
package.json
{
"name": "gulp4",
"version": "1.0.0",
"description": "",
"main": "entry.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.8.3",
"@babel/preset-env": "^7.8.3",
"@babel/runtime": "^7.8.3",
"babel-loader": "^8.0.6",
"babelify": "^10.0.0",
"browserify": "^16.5.0",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"gulp-concat": "^2.6.1",
"gulp-rev": "^9.0.0",
"gulp-series": "^1.0.2",
"gulp-uglify": "^3.0.2",
"gulp-watch": "^5.0.1",
"gulp-watch": "^5.0.1",
"vinyl-source-stream": "^2.0.0"
}
}
.babelrc
{
"presets": ["@babel/preset-env"]
}
gulpfile.js
const gulp = require("gulp"),
babel = require("gulp-babel"),
uglify = require("gulp-uglify"),
concat = require("gulp-concat"),
browserify = require("browserify"),
source = require("vinyl-source-stream");
gulp.task("babel", function () {
return gulp.src("./public/es6/*.js")
.pipe(babel())
.pipe(uglify())
.pipe(gulp.dest("js/"));
});
gulp.task("browserify", gulp.series(["babel"], function () {
var b = browserify({
entries: "./js/index.js"
});
return b.bundle()
.pipe(source("app.min.js"))
.pipe(gulp.dest("./dist/js"));
}));
gulp.task("default", gulp.series(["browserify"])); //默认编译,但不会监听
运行之后果然,完美编译。
最后稍微优化一下,加上监听和文件清除(确保每次编译出来的都是最新的内容)
const gulp = require("gulp"),
babel = require("gulp-babel"),
uglify = require("gulp-uglify"),
concat = require("gulp-concat"),
browserify = require("browserify"),
source = require("vinyl-source-stream");
watch = require('gulp-watch');
clean = require("gulp-clean");
const path = "./static/public/es6/"; //开发代码位置
const dist = "./static/bundle/"; // 编译后的代码位置
gulp.task("clean", function () {
return gulp.src(dist+"/*.js")
.pipe(clean())
});
gulp.task("babel", gulp.series(["clean"],function () {
return gulp.src(path+"*.js")
.pipe(babel())
.pipe(uglify())
.pipe(gulp.dest(dist));
}));
gulp.task("browserify", gulp.series(["babel"], function () {
var b = browserify({
entries: dist+"main.js"
});
return b.bundle()
.pipe(source("bundle.min.js"))
.pipe(gulp.dest(dist));
}));
gulp.task('auto',function () {
watch(path+'*.js', gulp.series('browserify'));
})
上面已经说了js的编译和压缩,这里再多说一下如何打包sass
const gulp = require("gulp"),
concat = require("gulp-concat"),
watch = require('gulp-watch');
clean = require("gulp-clean");
autoprefixer = require('gulp-autoprefixer'),
uglifycss = require('gulp-uglifycss'),
sass = require("gulp-sass"),
cssmin = require('gulp-clean-css'),
cssver = require('gulp-make-css-url-version'),
rename = require('gulp-rename');
//开发代码位置
const path = "./lib/**/*.js";
// 编译后的代码位置
const dist = "./dist/";
gulp.task('sass', function () {
// 找到 src/css/ 下的所有 css 文件
return gulp.src(path_css)
.pipe(sass({ style: 'expanded' }))
// 添加前缀(如:-webkit-)
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
// 合并为一个css
.pipe(concat('common-style.css'))
// 合并后的css 保存到 dist/css 下
.pipe(gulp.dest(dist_css))
.pipe(rename('common-style.min.css'))
.pipe(cssver())
.pipe(cssmin())
.pipe(gulp.dest(dist_css));
});
gulp.task('default',function () {
watch(path_css, gulp.series("sass"));
})
ParseError: ‘import’ and ‘export’ may appear only with ‘sourceType: module’
在编译的过程中遇到了以上错误,这里参考https://www.e-learn.cn/content/wangluowenzhang/1090546 找了解决方案。
即: 更改browserify 的任务代码如下
gulp.task("babel", gulp.series(["clean"],function () {
return gulp.src(path)
.pipe(babel())
.pipe(uglify())
.pipe(gulp.dest(dist));
}));
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/12715.html