Édo*_*pez 110 import jquery browserify ecmascript-6 semantic-ui
我正在使用(JavaScript)ES6语法通过babel转换器和preset-es2015插件以及semantic-ui样式编写一个新的应用程序.
import * as stylesheet from '../assets/styles/app.scss';
import * as jquery2 from '../dist/scripts/jquery.min';
import * as jquery3 from '../node_modules/jquery/dist/jquery.min';
console.log($('my-app'));
<!DOCTYPE html>
<html lang="fr">
<head>
<body>
<script src="dist/app.js"></script>
</body>
</html>
.
??? app/
? ??? index.js
??? assets/
??? dist/
? ??? scripts/
? ? ??? jquery.min.js
??? index.html
??? node_modules/
? ??? jquery/
? ? ??? dist/
? ? ? ??? jquery.min.js
??? package.json
??? tests/
…
"scripts": {
"build:app": "browserify -e ./app/index.js -o ./dist/app.js",
"copy:jquery": "cpy 'node_modules/jquery/dist/jquery.min.js' ./dist/scripts/",
…
},
"devDependencies": {
"babel-core": "6.3.x",
"babel-preset-es2015": "6.3.x",
"babelify": "7.2.x",
"cpy": "3.4.x",
"npm-run-all": "1.4.x",
"sassify": "0.9.x",
"semantic-ui": "2.1.x",
…
},
"browserify": {
"transform": [
[ "babelify", { "presets": [ "es2015"]}],
[ "sassify", { "auto-inject": true}]
]
}
使用经典<script>标签导入jquery工作正常,但我正在尝试使用ES6语法.
jquery以满足semantic-ui使用ES6导入语法？node_modules/目录或我的dist/(我复制所有内容)导入？Édo*_*pez 119
import {$,jQuery} from 'jquery';
// export for others scripts to use
window.$ = $;
window.jQuery = jQuery;
首先,正如@nem在评论中建议的那样,导入应该来自node_modules/:
好吧,导入从
dist/没有意义,因为这是您的生产就绪应用程序的分发文件夹.构建你的应用程序应该采取内部的东西node_modules/,并将其添加到dist/文件夹,包括jQuery.
接下来,glob - * as- 是错误的,因为我知道我正在导入什么对象(例如 jQuery和$),因此一个简单的import语句将起作用.
最后你需要使用它将它暴露给其他脚本window.$ = $.
然后,我作为两者导入$并jQuery覆盖所有用法,browserify删除导入复制,所以这里没有开销!^ O ^ÿ
ha7*_*ilm 47
基于ÉdouardLopez的解决方案,但有两行:
import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
小智 11
在Global范围中导入整个JQuery的内容。这会将$插入到当前范围中，其中包含从JQuery导出的所有绑定。
import * as $ from 'jquery';
现在，$属于window对象。
webpack 用户，将以下内容添加到您的plugins数组中。
let plugins = [
// expose $ and jQuery to global scope.
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
];
接受的答案对我来说不起作用
注意:使用汇总js不知道这个答案是否属于这里
npm
之后
i -
在custom.js中保存jquery
import {$, jQuery} from 'jquery';
要么
import {jQuery as $} from 'jquery';
我收到错误:模块... node_modules/jquery/dist/jquery.js不导出jQuery
或
模块... node_modules/jquery/dist/jquery.js不导出$
rollup.config.js
export default {
entry: 'source/custom',
dest: 'dist/custom.min.js',
plugins: [
inject({
include: '**/*.js',
exclude: 'node_modules/**',
jQuery: 'jquery',
// $: 'jquery'
}),
nodeResolve({
jsnext: true,
}),
babel(),
// uglify({}, minify),
],
external: [],
format: 'iife', //'cjs'
moduleName: 'mycustom',
};
尝试而不是汇总注入
commonjs({
namedExports: {
// left-hand side can be an absolute path, a path
// relative to the current directory, or the name
// of a module in node_modules
// 'node_modules/jquery/dist/jquery.js': [ '$' ]
// 'node_modules/jquery/dist/jquery.js': [ 'jQuery' ]
'jQuery': [ '$' ]
},
format: 'cjs' //'iife'
};
的package.json
"devDependencies": {
"babel-cli": "^6.10.1",
"babel-core": "^6.10.4",
"babel-eslint": "6.1.0",
"babel-loader": "^6.2.4",
"babel-plugin-external-helpers": "6.18.0",
"babel-preset-es2015": "^6.9.0",
"babel-register": "6.9.0",
"eslint": "2.12.0",
"eslint-config-airbnb-base": "3.0.1",
"eslint-plugin-import": "1.8.1",
"rollup": "0.33.0",
"rollup-plugin-babel": "2.6.1",
"rollup-plugin-commonjs": "3.1.0",
"rollup-plugin-inject": "^2.0.0",
"rollup-plugin-node-resolve": "2.0.0",
"rollup-plugin-uglify": "1.0.1",
"uglify-js": "2.7.0"
},
"scripts": {
"build": "rollup -c",
},
这工作:
删除了汇总注入和commonjs插件
import * as jQuery from 'jquery';
然后在custom.js
$(function () {
console.log('Hello jQuery');
});
您可以创建模块转换器:
// jquery.module.js
import 'https://code.jquery.com/jquery-3.3.1.min.js'
export default window.jQuery.noConflict(true)
这将删除jQuery引入的全局变量,并将jQuery对象导出为默认值.
然后在你的脚本中使用它:
// script.js
import $ from "./jquery.module.js";
$(function(){
$('body').text('youpi!');
});
不要忘记将其作为模块加载到文档中
<script type='module' src='./script.js'></script>
http://plnkr.co/edit/a59ETj3Yo2PJ0Aqkxbeu?p=preview
我还没有看到这个确切的语法发布，它在 ES6/Webpack 环境中对我有用：
import $ from "jquery";
直接取自jQuery 的 NPM 页面。希望这可以帮助某人。
如果可以帮助任何人，则将挂起javascript import语句。因此，如果库在全局名称空间（窗口）中对jquery具有依赖项（例如，引导程序），则将无法使用：
import {$,jQuery} from 'jquery';
window.$ = $;
window.jQuery = jQuery;
import 'bootstrap/dist/js/bootstrap.min';
这是因为在将jQuery附加到窗口之前，已启动并评估了引导程序的导入。
解决此问题的一种方法是不直接导入jQuery，而是导入一个模块，该模块本身会导入jQuery并将其附加到窗口。
import jQuery from './util/leaked-jquery';
import 'bootstrap/dist/js/bootstrap.min';
这里leaked-jquery看起来像
import {$,jQuery} from 'jquery';
window.$ = $;
window.jQuery = jQuery;
export default $;
export jQuery;
| 归档时间： |
|
| 查看次数： |
142233 次 |
| 最近记录： |